Write HTML code for the following Table.

HTML 5 HTML Table (Article) HTML Table (Program)

1689

Program:

<span class="dec">&lt;!DOCTYPE html&gt;</span><span class="pln">
</span><span class="tag">&lt;html&gt;</span><span class="pln">
</span><span class="tag">&lt;head&gt;</span><span class="pln">
</span><span class="tag">&lt;style&gt;</span><span class="pln">
table</span><span class="pun">,</span><span class="pln"> th</span><span class="pun">,</span><span class="pln"> td </span><span class="pun">{</span><span class="pln">
  border</span><span class="pun">:</span><span class="pln"> </span><span class="lit">1px</span><span class="pln"> solid black</span><span class="pun">;</span><span class="pln">
</span><span class="pun">}</span><span class="pln">
</span><span class="tag">&lt;/style&gt;</span><span class="pln">
</span><span class="tag">&lt;/head&gt;</span><span class="pln">
</span><span class="tag">&lt;body&gt;</span><span class="pln"> 
 

</span><span class="tag">&lt;table&gt;</span><span class="pln">
 </span><span class="tag">&lt;tr</span><span class="pln"> </span><span class="tag">&gt;</span><span class="pln">
    </span><span class="tag">&lt;td</span><span class="pln"> </span><span class="atn">colspan</span><span class="pun">=</span><span class="atv">"2"</span><span class="pln"> </span><span class="atn">align</span><span class="pun">=</span><span class="atv">"center"</span><span class="tag">&gt;</span><span class="pln">
    Provide details of new product
    </span><span class="tag">&lt;/td&gt;</span><span class="pln"> 
  </span><span class="tag">&lt;/tr&gt;</span><span class="pln">
  </span><span class="tag">&lt;tr&gt;</span><span class="pln">
    </span><span class="tag">&lt;td&gt;</span><span class="pln">Product Code:</span><span class="tag">&lt;/td&gt;</span><span class="pln">
    </span><span class="tag">&lt;td&gt;</span><span class="pln"> </span><span class="tag">&lt;input</span><span class="pln"> </span><span class="atn">type</span><span class="pln"> </span><span class="pun">=</span><span class="pln"> </span><span class="atv">"text"</span><span class="pln"> </span><span class="atn">name</span><span class="pln"> </span><span class="pun">=</span><span class="pln"> </span><span class="atv">"product_code"</span><span class="pln"> </span><span class="atn">placeholder</span><span class="pun">=</span><span class="atv">"Unique Product Code"</span><span class="tag">&gt;&lt;/td&gt;</span><span class="pln">
   
  </span><span class="tag">&lt;/tr&gt;</span><span class="pln">
  </span><span class="tag">&lt;tr&gt;</span><span class="pln">
    </span><span class="tag">&lt;td&gt;</span><span class="pln">Name of the Product:</span><span class="tag">&lt;/td&gt;</span><span class="pln">
    </span><span class="tag">&lt;td&gt;</span><span class="pln">   </span><span class="tag">&lt;input</span><span class="pln"> </span><span class="atn">type</span><span class="pln"> </span><span class="pun">=</span><span class="pln"> </span><span class="atv">"text"</span><span class="pln"> </span><span class="atn">name</span><span class="pln"> </span><span class="pun">=</span><span class="pln"> </span><span class="atv">"product_name"</span><span class="pln"> </span><span class="atn">placeholder</span><span class="pun">=</span><span class="atv">"Name of Product"</span><span class="tag">&gt;&lt;/td&gt;</span><span class="pln">  
     
  </span><span class="tag">&lt;/tr&gt;</span><span class="pln">
   </span><span class="tag">&lt;tr&gt;</span><span class="pln">
    </span><span class="tag">&lt;td&gt;</span><span class="pln">Category of Product:</span><span class="tag">&lt;/td&gt;</span><span class="pln">
    </span><span class="tag">&lt;td&gt;</span><span class="pln">
    </span><span class="tag">&lt;select</span><span class="pln"> </span><span class="atn">name</span><span class="pun">=</span><span class="atv">"selCat"</span><span class="tag">&gt;</span><span class="pln">
	</span><span class="tag">&lt;option</span><span class="pln"> </span><span class="atn">selected</span><span class="pun">=</span><span class="atv">"selected"</span><span class="pln"> </span><span class="atn">value</span><span class="pun">=</span><span class="atv">""</span><span class="tag">&gt;</span><span class="pln"> Select Product Category     </span><span class="tag">&lt;/option&gt;</span><span class="pln">
	</span><span class="tag">&lt;option</span><span class="pln"> </span><span class="atn">value</span><span class="pun">=</span><span class="atv">"cat1"</span><span class="tag">&gt;</span><span class="pln"> Category 1 </span><span class="tag">&lt;/option&gt;</span><span class="pln">
	</span><span class="tag">&lt;option</span><span class="pln"> </span><span class="atn">value</span><span class="pun">=</span><span class="atv">"cat2"</span><span class="tag">&gt;</span><span class="pln"> Category 2 </span><span class="tag">&lt;/option&gt;</span><span class="pln">
	</span><span class="tag">&lt;option</span><span class="pln"> </span><span class="atn">value</span><span class="pun">=</span><span class="atv">"cat3"</span><span class="tag">&gt;</span><span class="pln"> Category 3 </span><span class="tag">&lt;/option&gt;</span><span class="pln">
</span><span class="tag">&lt;/select&gt;</span><span class="pln">
</span><span class="tag">&lt;/td&gt;</span><span class="pln">
  </span><span class="tag">&lt;/tr&gt;</span><span class="pln">
  
   </span><span class="tag">&lt;tr&gt;</span><span class="pln">
    </span><span class="tag">&lt;td&gt;</span><span class="pln">Product Manufacturers:</span><span class="tag">&lt;/td&gt;</span><span class="pln">
    </span><span class="tag">&lt;td&gt;</span><span class="pln">
    </span><span class="tag">&lt;select</span><span class="pln"> </span><span class="atn">name</span><span class="pun">=</span><span class="atv">"selMan"</span><span class="tag">&gt;</span><span class="pln">
    </span><span class="tag">&lt;option</span><span class="pln"> </span><span class="atn">selected</span><span class="pun">=</span><span class="atv">"selected"</span><span class="pln"> </span><span class="atn">value</span><span class="pun">=</span><span class="atv">""</span><span class="tag">&gt;</span><span class="pln"> Select Manufacturers </span><span class="tag">&lt;/option&gt;</span><span class="pln">
	</span><span class="tag">&lt;option</span><span class="pln"> </span><span class="atn">value</span><span class="pun">=</span><span class="atv">"man1"</span><span class="tag">&gt;</span><span class="pln"> Manufacturers 1 </span><span class="tag">&lt;/option&gt;</span><span class="pln">
	</span><span class="tag">&lt;option</span><span class="pln"> </span><span class="atn">value</span><span class="pun">=</span><span class="atv">"man2"</span><span class="tag">&gt;</span><span class="pln"> Manufacturers 2 </span><span class="tag">&lt;/option&gt;</span><span class="pln">
	</span><span class="tag">&lt;option</span><span class="pln"> </span><span class="atn">value</span><span class="pun">=</span><span class="atv">"man3"</span><span class="tag">&gt;</span><span class="pln"> Manufacturers 3 </span><span class="tag">&lt;/option&gt;</span><span class="pln">
</span><span class="tag">&lt;/select&gt;</span><span class="pln">
    </span><span class="tag">&lt;/td&gt;</span><span class="pln">     
  </span><span class="tag">&lt;/tr&gt;</span><span class="pln">
  
   </span><span class="tag">&lt;tr&gt;</span><span class="pln">
    </span><span class="tag">&lt;td&gt;</span><span class="pln">Product Location:</span><span class="tag">&lt;/td&gt;</span><span class="pln">
    </span><span class="tag">&lt;td&gt;</span><span class="pln">
    </span><span class="tag">&lt;select</span><span class="pln"> </span><span class="atn">name</span><span class="pun">=</span><span class="atv">"selLoc"</span><span class="tag">&gt;</span><span class="pln">
    </span><span class="tag">&lt;option</span><span class="pln"> </span><span class="atn">selected</span><span class="pun">=</span><span class="atv">"selected"</span><span class="pln"> </span><span class="atn">value</span><span class="pun">=</span><span class="atv">""</span><span class="tag">&gt;</span><span class="pln"> Select Location </span><span class="tag">&lt;/option&gt;</span><span class="pln">
	</span><span class="tag">&lt;option</span><span class="pln"> </span><span class="atn">value</span><span class="pun">=</span><span class="atv">"Loc1"</span><span class="tag">&gt;</span><span class="pln"> Location 1 </span><span class="tag">&lt;/option&gt;</span><span class="pln">
	</span><span class="tag">&lt;option</span><span class="pln"> </span><span class="atn">value</span><span class="pun">=</span><span class="atv">"Loc2"</span><span class="tag">&gt;</span><span class="pln"> Location 2 </span><span class="tag">&lt;/option&gt;</span><span class="pln">
	</span><span class="tag">&lt;option</span><span class="pln"> </span><span class="atn">value</span><span class="pun">=</span><span class="atv">"Loc3"</span><span class="tag">&gt;</span><span class="pln"> Location 3 </span><span class="tag">&lt;/option&gt;</span><span class="pln">
</span><span class="tag">&lt;/select&gt;</span><span class="pln">
    </span><span class="tag">&lt;/td&gt;</span><span class="pln">     
  </span><span class="tag">&lt;/tr&gt;</span><span class="pln">
  
  </span><span class="tag">&lt;tr</span><span class="pln"> </span><span class="tag">&gt;</span><span class="pln">
    </span><span class="tag">&lt;td</span><span class="pln"> </span><span class="atn">colspan</span><span class="pun">=</span><span class="atv">"2"</span><span class="pln"> </span><span class="atn">align</span><span class="pun">=</span><span class="atv">"center"</span><span class="tag">&gt;</span><span class="pln">
    </span><span class="tag">&lt;input</span><span class="pln"> </span><span class="atn">type</span><span class="pun">=</span><span class="atv">"submit"</span><span class="pln"> </span><span class="atn">name</span><span class="pun">=</span><span class="atv">"submit"</span><span class="pln"> </span><span class="atn">value</span><span class="pun">=</span><span class="atv">"Save"</span><span class="tag">&gt;</span><span class="pln">
    </span><span class="tag">&lt;input</span><span class="pln"> </span><span class="atn">type</span><span class="pun">=</span><span class="atv">"reset"</span><span class="pln"> </span><span class="atn">value</span><span class="pun">=</span><span class="atv">"Cancel"</span><span class="tag">&gt;</span><span class="pln">
    </span><span class="tag">&lt;/td&gt;</span><span class="pln"> 
  </span><span class="tag">&lt;/tr&gt;</span><span class="pln">
</span><span class="tag">&lt;/table&gt;</span><span class="pln">

</span><span class="tag">&lt;/body&gt;</span><span class="pln">
</span><span class="tag">&lt;/html&gt;</span>

Output:

Explanation:

This Particular section is dedicated to Programs only. If you want learn more about HTML 5. Then you can visit below links to get more depth on this subject.