HTML, CSS, and Javascript Course for Web Developers

HTML TABLE

There may be times when you’ll wish to display a table of data on your website. Let’s get started by converting the table below to HTML.

If you’ve never dealt with tabular data before, it’s helpful to understand that a table is made up of rows and columns.

Example

So how do we apply these concepts to HTML? First, we need to declare an HTML table by using the <table> tag

<table></table>

To add a row to our table, use the <tr>

<table> 
<tr></tr> 
</table>

To add individual pieces of data (the cells) corresponding to the columns, use the <td> tag, which means table data.

To indicate that a cell is part of the header, use the <th> tag instead of <td>

<table>
<tr> 
<td>first 1</td> 
<td>second 2</td> 
<td>third 3</td>
<td>fourth 4 </td> 
</tr> 
</table>

Now let us combine this to make a full table.

HTML Table Tags

Tag	Description
<table>	Defines a table
<th>	Defines a header cell in a table
<tr>	Defines a row in a table
<td>	Defines a cell in a table
<caption>	Defines a table caption
<colgroup>	Specifies a group of one or more columns in a table for formatting
<col>	Specifies column properties for each column within a <colgroup> element
<thead>	Groups the header content in a table
<tbody>	Groups the body content in a table
<tfoot>	Groups the footer content in a table

See the complete list here.