html table tag

HTML Table

<table> tag is used to design a table.

<tr>, <th>, <td> tags are used and written inside the <table> tag.

<tr> tag in HTML (table row)

To start the row <tr> tag is used.

<th> tag in HTML (table heading)

<th> tag is defined inside the <tr> tag and its default text style is bold and centered.

<td> tag in HTML (table data)

Contents to be displayed, are written inside the <td> tag, and it is defined inside <tr> tag.

Example

<table> <tr> <th>Name</th> <th>Country</th> </tr> <tr> <td>Franklin Jose</td> <td>India</td> </tr> <tr> <td>Sreeja</td> <td>China</td> </tr> </table>

Test it now

width, height and border Attribute in HTML table tag

The width attribute is used to set the width of the whole table.

The height attribute is used to set the height of the table.

If the values are given in percentage(%), table size will automatically adjust itself according to the screen size.

Example - Table width

<table width="50%"> <tr> <th>Name</th> <th>Country</th> </tr> <tr> <td>Franklin Jose</td> <td>India</td> </tr> <tr> <td>Sreeja</td> <td>China</td> </tr> </table>

Test it now

Example - Table height

<table height="250px"> <tr> <th>Name</th> <th>Country</th> </tr> <tr> <td>Franklin Jose</td> <td>India</td> </tr> <tr> <td>Sreeja</td> <td>China</td> </tr> </table>

Test it now

The border attribute is used to draw the border line for table.

Example - Table border

<table border="1"> <tr> <th>Name</th> <th>Country</th> </tr> <tr> <td>Franklin Jose</td> <td>India</td> </tr> <tr> <td>Sreeja</td> <td>China</td> </tr> </table>

Test it now

cellspacing and cellpadding attribute in HTML table

The cellspacing attribute is used to give space between two cell (<td> tag).

The cellpadding attribute is used to adjust the space in the cell and the contents present in it, by doing so the size of the cell can be changed.

Example - Table cellspacing & cellpadding

<table border="1" cellspacing="10" cellpadding="25"> <tr> <th>Name</th> <th>Country</th> </tr> <tr> <td>Franklin Jose</td> <td>India</td> </tr> <tr> <td>Sreeja</td> <td>China</td> </tr> </table>

Test it now

colspan in HTML table

The colspan attribute is used to merge two columns into one cell.

Example - Table colspan

<table border="1"> <tr> <th>Name</th> <th>Mark 1</th> <th>Mark 2</th> <th>Mark 3</th> <th>Mark 4</th> </tr> <tr> <td>Franklin Jose</td> <td>34</td> <td colspan="2">0</td> <td>98</td> </tr> <tr> <td>Sreeja</td> <td colspan="2">100</td> <td>50</td> <td>72</td> </tr> </table>

Test it now

rowspan in HTML table

The rowspan attribute is used to merge two rows into one cell.

Example - Table rowspan

<table border="1"> <tr> <td>Franklin Jose</td> <td rowspan="2">100</td> <td>60</td> <td>70</td> <td>98</td> </tr> <tr> <td>Sreeja</td> <td>97</td> <td>50</td> <td>0</td> </tr> </table>

Test it now

<caption> tag in HTML

The HTML <caption> tag is used for creating a caption or a title for a table.

There should be only one caption per table.

Example - Table title

<table border="1"> <caption>Employee Details</caption> <tr> <th>Name</th> <th>Country</th> </tr> <tr> <td>Franklin Jose</td> <td>India</td> </tr> <tr> <td>Sreeja</td> <td>China</td> </tr> </table>

Test it now