How to Use Table Captions in HTML: A Complete Guide
☰Fullscreen
Table of Content:
The HTML <caption> element represents the title of a table.
Your table may shows results for a scientific experiment, values of stocks in a particular market, or what is on television tonight or it may be the informstion of students, each table should have a caption (about table) so that visitors to your site know what the table is for.
it is good practice to give the table a formal caption using the <caption> element.
The <caption> element appears directly after the opening <table> tag; it should come before the first row:
Syntax
<table> <caption> Opening hours for the Example Cafe </caption> <tr> ............................ ............................ </tr> </table>
html code
<span class="pln"> </span><span class="tag"><table</span><span class="pln"> </span><span class="atn">style</span><span class="pun">=</span><span class="atv">"</span><span class="pln">height</span><span class="pun">:</span><span class="pln"> </span><span class="lit">261px</span><span class="pun">;</span><span class="atv">"</span><span class="pln"> </span><span class="atn">width</span><span class="pun">=</span><span class="atv">"249"</span><span class="pln"> </span><span class="atn">border</span><span class="pun">=</span><span class="atv">"1"</span><span class="tag">></span><span class="pln"> </span><span class="tag"><caption></span><span class="pln">Language and their Type </span><span class="tag"></caption></span><span class="pln"> </span><span class="tag"><tbody></span><span class="pln"> </span><span class="tag"><tr></span><span class="pln"> </span><span class="tag"><td</span><span class="pln"> </span><span class="atn">style</span><span class="pun">=</span><span class="atv">"</span><span class="pln">width</span><span class="pun">:</span><span class="pln"> </span><span class="lit">116px</span><span class="pun">;</span><span class="atv">"</span><span class="tag">></span><span class="pln">Language</span><span class="tag"></td></span><span class="pln"> </span><span class="tag"><td</span><span class="pln"> </span><span class="atn">style</span><span class="pun">=</span><span class="atv">"</span><span class="pln">width</span><span class="pun">:</span><span class="pln"> </span><span class="lit">117px</span><span class="pun">;</span><span class="atv">"</span><span class="tag">></span><span class="pln">Type</span><span class="tag"></td></span><span class="pln"> </span><span class="tag"></tr></span><span class="pln"> </span><span class="tag"><tr></span><span class="pln"> </span><span class="tag"><td</span><span class="pln"> </span><span class="atn">style</span><span class="pun">=</span><span class="atv">"</span><span class="pln">width</span><span class="pun">:</span><span class="pln"> </span><span class="lit">116px</span><span class="pun">;</span><span class="atv">"</span><span class="tag">></span><span class="pln">C Programming</span><span class="tag"></td></span><span class="pln"> </span><span class="tag"><td</span><span class="pln"> </span><span class="atn">style</span><span class="pun">=</span><span class="atv">"</span><span class="pln">width</span><span class="pun">:</span><span class="pln"> </span><span class="lit">117px</span><span class="pun">;</span><span class="atv">"</span><span class="tag">></span><span class="pln">Structured&nbsp;</span><span class="tag"></td></span><span class="pln"> </span><span class="tag"></tr></span><span class="pln"> </span><span class="tag"><tr></span><span class="pln"> </span><span class="tag"><td</span><span class="pln"> </span><span class="atn">style</span><span class="pun">=</span><span class="atv">"</span><span class="pln">width</span><span class="pun">:</span><span class="pln"> </span><span class="lit">116px</span><span class="pun">;</span><span class="atv">"</span><span class="tag">></span><span class="pln">Java</span><span class="tag"></td></span><span class="pln"> </span><span class="tag"><td</span><span class="pln"> </span><span class="atn">style</span><span class="pun">=</span><span class="atv">"</span><span class="pln">width</span><span class="pun">:</span><span class="pln"> </span><span class="lit">117px</span><span class="pun">;</span><span class="atv">"</span><span class="tag">></span><span class="pln">Object Oriented</span><span class="tag"></td></span><span class="pln"> </span><span class="tag"></tr></span><span class="pln"> </span><span class="tag"><tr></span><span class="pln"> </span><span class="tag"><td</span><span class="pln"> </span><span class="atn">style</span><span class="pun">=</span><span class="atv">"</span><span class="pln">width</span><span class="pun">:</span><span class="pln"> </span><span class="lit">116px</span><span class="pun">;</span><span class="atv">"</span><span class="tag">></span><span class="pln">Php</span><span class="tag"></td></span><span class="pln"> </span><span class="tag"><td</span><span class="pln"> </span><span class="atn">style</span><span class="pun">=</span><span class="atv">"</span><span class="pln">width</span><span class="pun">:</span><span class="pln"> </span><span class="lit">117px</span><span class="pun">;</span><span class="atv">"</span><span class="tag">></span><span class="pln">Object Oriented</span><span class="tag"></td></span><span class="pln"> </span><span class="tag"></tr></span><span class="pln"> </span><span class="tag"><tr></span><span class="pln"> </span><span class="tag"><td</span><span class="pln"> </span><span class="atn">style</span><span class="pun">=</span><span class="atv">"</span><span class="pln">width</span><span class="pun">:</span><span class="pln"> </span><span class="lit">116px</span><span class="pun">;</span><span class="atv">"</span><span class="tag">></span><span class="pln">Python</span><span class="tag"></td></span><span class="pln"> </span><span class="tag"><td</span><span class="pln"> </span><span class="atn">style</span><span class="pun">=</span><span class="atv">"</span><span class="pln">width</span><span class="pun">:</span><span class="pln"> </span><span class="lit">117px</span><span class="pun">;</span><span class="atv">"</span><span class="tag">></span><span class="pln">Object Oriented</span><span class="tag"></td></span><span class="pln"> </span><span class="tag"></tr></span><span class="pln"> </span><span class="tag"></tbody></span><span class="pln"> </span><span class="tag"></table></span><span class="pln"> </span>
Live Preview
Example of rowspan and colspan
Html code: rowspan
Spanning Rows Using the rowspan Attribute
<span class="pln"> </span><span class="tag"><table</span><span class="pln"> </span><span class="atn">border</span><span class="pun">=</span><span class="atv">"1"</span><span class="tag">></span><span class="pln"> </span><span class="tag"><caption></span><span class="pln"> Spanning rows using the colspan attribute </span><span class="tag"></caption></span><span class="pln"> </span><span class="tag"><tr></span><span class="pln"> </span><span class="tag"><td</span><span class="pln"> </span><span class="atn">bgcolor</span><span class="pun">=</span><span class="atv">"#efefef"</span><span class="pln"> </span><span class="atn">width</span><span class="pun">=</span><span class="atv">"100"</span><span class="pln"> </span><span class="atn">height</span><span class="pun">=</span><span class="atv">"100"</span><span class="tag">></span><span class="pln"> &nbsp; </span><span class="tag"></td></span><span class="pln"> </span><span class="tag"><td</span><span class="pln"> </span><span class="atn">bgcolor</span><span class="pun">=</span><span class="atv">"#999999"</span><span class="pln"> </span><span class="atn">width</span><span class="pun">=</span><span class="atv">"100"</span><span class="pln"> </span><span class="atn">height</span><span class="pun">=</span><span class="atv">"100"</span><span class="tag">></span><span class="pln"> &nbsp; </span><span class="tag"></td></span><span class="pln"> </span><span class="tag"><td</span><span class="pln"> </span><span class="atn">rowspan</span><span class="pun">=</span><span class="atv">"3"</span><span class="pln"> </span><span class="atn">bgcolor</span><span class="pun">=</span><span class="atv">"#000000"</span><span class="pln"> </span><span class="atn">width</span><span class="pun">=</span><span class="atv">"100"</span><span class="pln"> </span><span class="atn">height</span><span class="pun">=</span><span class="atv">"100"</span><span class="tag">></span><span class="pln"> &nbsp; </span><span class="tag"></td></span><span class="pln"> </span><span class="tag"></tr></span><span class="pln"> </span><span class="tag"><tr></span><span class="pln"> </span><span class="tag"><td</span><span class="pln"> </span><span class="atn">bgcolor</span><span class="pun">=</span><span class="atv">"#efefef"</span><span class="pln"> </span><span class="atn">height</span><span class="pun">=</span><span class="atv">"100"</span><span class="tag">></span><span class="pln"> &nbsp; </span><span class="tag"></td></span><span class="pln"> </span><span class="tag"><td</span><span class="pln"> </span><span class="atn">rowspan</span><span class="pun">=</span><span class="atv">"2"</span><span class="pln"> </span><span class="atn">bgcolor</span><span class="pun">=</span><span class="atv">"#999999"</span><span class="tag">></span><span class="pln"> &nbsp; </span><span class="tag"></td></span><span class="pln"> </span><span class="tag"></tr></span><span class="pln"> </span><span class="tag"><tr></span><span class="pln"> </span><span class="tag"><td</span><span class="pln"> </span><span class="atn">bgcolor</span><span class="pun">=</span><span class="atv">"#efefef"</span><span class="pln"> </span><span class="atn">height</span><span class="pun">=</span><span class="atv">"100"</span><span class="tag">></span><span class="pln"> &nbsp; </span><span class="tag"></td></span><span class="pln"> </span><span class="tag"></tr></span><span class="pln"> </span><span class="tag"><tr></span><span class="pln"> </span><span class="tag"><td</span><span class="pln"> </span><span class="atn">bgcolor</span><span class="pun">=</span><span class="atv">"#999999"</span><span class="pln"> </span><span class="atn">height</span><span class="pun">=</span><span class="atv">"100"</span><span class="tag">></span><span class="pln"> &nbsp; </span><span class="tag"></td></span><span class="pln"> </span><span class="tag"></tr></span><span class="pln"> </span><span class="tag"></table></span><span class="pln"> </span>
Live Preview
Html code: colspan
Spanning Columns Using the colspan Attribute
<span class="pln"> </span><span class="tag"><table</span><span class="pln"> </span><span class="atn">border</span><span class="pun">=</span><span class="atv">"1"</span><span class="tag">></span><span class="pln"> </span><span class="tag"><caption></span><span class="pln"> Spanning columns using the colspan attribute </span><span class="tag"></caption></span><span class="pln"> </span><span class="tag"><tr></span><span class="pln"> </span><span class="tag"><td</span><span class="pln"> </span><span class="atn">bgcolor</span><span class="pun">=</span><span class="atv">"#efefef"</span><span class="pln"> </span><span class="atn">width</span><span class="pun">=</span><span class="atv">"100"</span><span class="pln"> </span><span class="atn">height</span><span class="pun">=</span><span class="atv">"100"</span><span class="tag">></span><span class="pln"> &nbsp; </span><span class="tag"></td></span><span class="pln"> </span><span class="tag"><td</span><span class="pln"> </span><span class="atn">bgcolor</span><span class="pun">=</span><span class="atv">"#999999"</span><span class="pln"> </span><span class="atn">width</span><span class="pun">=</span><span class="atv">"100"</span><span class="pln"> </span><span class="atn">height</span><span class="pun">=</span><span class="atv">"100"</span><span class="tag">></span><span class="pln"> &nbsp; </span><span class="tag"></td></span><span class="pln"> </span><span class="tag"><td</span><span class="pln"> </span><span class="atn">bgcolor</span><span class="pun">=</span><span class="atv">"#000000"</span><span class="pln"> </span><span class="atn">width</span><span class="pun">=</span><span class="atv">"100"</span><span class="pln"> </span><span class="atn">height</span><span class="pun">=</span><span class="atv">"100"</span><span class="tag">></span><span class="pln"> &nbsp; </span><span class="tag"></td></span><span class="pln"> </span><span class="tag"></tr></span><span class="pln"> </span><span class="tag"><tr></span><span class="pln"> </span><span class="tag"><td</span><span class="pln"> </span><span class="atn">colspan</span><span class="pun">=</span><span class="atv">"3"</span><span class="pln"> </span><span class="atn">bgcolor</span><span class="pun">=</span><span class="atv">"#efefef"</span><span class="pln"> </span><span class="atn">height</span><span class="pun">=</span><span class="atv">"100"</span><span class="tag">></span><span class="pln"> &nbsp; </span><span class="tag"></td></span><span class="pln"> </span><span class="tag"></tr></span><span class="pln"> </span><span class="tag"><tr></span><span class="pln"> </span><span class="tag"><td</span><span class="pln"> </span><span class="atn">bgcolor</span><span class="pun">=</span><span class="atv">"#efefef"</span><span class="pln"> </span><span class="atn">width</span><span class="pun">=</span><span class="atv">"100"</span><span class="pln"> </span><span class="atn">height</span><span class="pun">=</span><span class="atv">"100"</span><span class="tag">></span><span class="pln"> &nbsp; </span><span class="tag"></td></span><span class="pln"> </span><span class="tag"><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">bgcolor</span><span class="pun">=</span><span class="atv">"#999999"</span><span class="tag">></span><span class="pln"> &nbsp; </span><span class="tag"></td></span><span class="pln"> </span><span class="tag"></tr></span><span class="pln"> </span><span class="tag"><tr></span><span class="pln"> </span><span class="tag"><td</span><span class="pln"> </span><span class="atn">colspan</span><span class="pun">=</span><span class="atv">"3"</span><span class="pln"> </span><span class="atn">bgcolor</span><span class="pun">=</span><span class="atv">"#efefef"</span><span class="pln"> </span><span class="atn">height</span><span class="pun">=</span><span class="atv">"100"</span><span class="tag">></span><span class="pln"> &nbsp; </span><span class="tag"></td></span><span class="pln"> </span><span class="tag"></tr></span><span class="pln"> </span><span class="tag"></table></span><span class="pln"> </span>
Live Preview
No Questions Data Available.
No Program Data.