HTML Tables

Tables are used to create tabular data that is, data represented in rows and columns. HTML tables are created using the <table> tag in conjunction with the <tr> and <td> tags. Some also use table to represent web layouts.

HTML <table> Tag

The <table> tag is used to create a HTML table. The <table> tag is used in conjunction with the <tr>, <th> and <td> tag to create a table.

For example:

<table>
<tbody>
<tr>
<th>HTML</th>
<th>CSS</th>
</tr>
<tr>
<td>Hyper Text Markup Language</td>
<td>Cascading Style Sheets</td>
</tr>
<tr>
<td>.html</td>
<td>.css</td>
</tr>
</tbody>
</table>

HTML <tr> Tag

The <tr> tag is used to define a table row in an HTML table. The <tr> tag contains more than one <th> and <td> tags.

For example:

<table>
<tbody>
<tr>
<th>HTML</th>
<th>CSS</th>
</tr>
<tr>
<td>Hyper Text Markup Language</td>
<td>Cascading Style Sheets</td>
</tr>
<tr>
<td>.html</td>
<td>.css</td>
</tr>
</tbody>
</table>

HTML <th> Tag

The <th> tag is used to create a header cell in HTML tables. The header cell will be bold and centered and also left-aligned by default.

For example:

<table>
<tbody>
<tr>
<th>HTML</th>
<th>CSS</th>
</tr>
<tr>
<td>Hyper Text Markup Language</td>
<td>Cascading Style Sheets</td>
</tr>
<tr>
<td>.html</td>
<td>.css</td>
</tr>
</tbody>
</table>

HTML <td> Tag

The <td> tag is used to create standard cells in HTML tables. This cell usually contains the data in the table.

For example:

<table>
<tbody>
<tr>
<th>HTML</th>
<th>CSS</th>
</tr>
<tr>
<td>Hyper Text Markup Language</td>
<td>Cascading Style Sheets</td>
</tr>
<tr>
<td>.html</td>
<td>.css</td>
</tr>
</tbody>
</table>

HTML <caption> Tag

The <caption> tag is used to define a table caption. The <caption> tag is inserted just after the <table> tag. By default, the caption may be center aligned.

For example:

<table>
<caption>WEB DESIGNING</caption>
<tbody>
<tr>
<th>HTML</th>
<th>CSS</th>
</tr>
<tr>
<td>Hyper Text Markup Language</td>
<td>Cascading Style Sheets</td>
</tr>
<tr>
<td>.html</td>
<td>.css</td>
</tr>
</tbody>
</table>

HTML <thead> Tag

The <thead> tag is used to group the header contents in an HTML table. The <thead> tag is used in conjuction with the <tbody> and <tfoot> to specify each part of the table.

For example:

<table>
<thead>
<tr>
<th>HTML</th>
<th>CSS</th>
</tr>
</thead>
<tbody>
<tr>
<td>Hyper Text Markup Language</td>
<td>Cascading Style Sheets</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>.html</td>
<td>.css</td>
</tr>
</tfoot>
</table>

HTML <tbody> Tag

The <tbody> tag is used to group the body contents in an HTML table. The <tbody> tag is used in conjuction with the <thead> and <tfoot> to specify each part of the table.

For example:

<table>
<thead>
<tr>
<th>HTML</th>
<th>CSS</th>
</tr>
</thead>
<tbody>
<tr>
<td>Hyper Text Markup Language</td>
<td>Cascading Style Sheets</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>.html</td>
<td>.css</td>
</tr>
</tfoot>
</table>

HTML <tfoot> Tag

The <tfoot> tag is used to group the footer contents in an HTML table. The tag is used in conjuction with the <thead> and <tbody> to specify each part of the table.

For example:

<table>
<thead>
<tr>
<th>HTML</th>
<th>CSS</th>
</tr>
</thead>
<tbody>
<tr>
<td>Hyper Text Markup Language</td>
<td>Cascading Style Sheets</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>.html</td>
<td>.css</td>
</tr>
</tfoot>
</table>

HTML <colgroup> Tag

The <colgroup> tag is used to specify a group of one or more columns in a table for formatting. The <colgroup> tag is useful to specify styles for an entire column rather than repeating styles for each cell, for each row.

For example:

<table>
<colgroup>
<col span="2" style="background-color: yellow;"></col
<col style="background-color: red;"></col>
</colgroup>
<tbody>
<tr>
<th>HTML</th>
<th>CSS</th>
<th>JavaScript</th>
</tr>
<tr>
<td>Markup Language</td>
<td>Style Sheet Language</td>
<td>Scripting Language</td>
</tr>
<tr>
<td>.html</td>
<td>.css</td>
<td>.js</td>
</tr>
</tbody>
</table>

HTML <col> Tag

The <col> tag is used to specify column properties for each column within a element. The <col> tag is useful to specify styles for an entire column rather than repeating styles for each cell, for each row.

For example:

<table>
<colgroup>
<col span="2" style="background-color: yellow;"></col
<col style="background-color: red;"></col>
</colgroup>
<tbody>
<tr>
<th>HTML</th>
<th>CSS</th>
<th>JavaScript</th>
</tr>
<tr>
<td>Markup Language</td>
<td>Style Sheet Language</td>
<td>Scripting Language</td>
</tr>
<tr>
<td>.html</td>
<td>.css</td>
<td>.js</td>
</tr>
</tbody>
</table>