HTML Tables
HTML tables allow web developers to arrange data into rows and
HTML tables allow web developers to arrange data into rows and columns.
Example
| Company | Contact | Country |
|---|---|---|
| Alfreds Futterkiste | Maria Anders | Germany |
| Centro comercial Moctezuma | Francisco Chang | Mexico |
| Ernst Handel | Roland Mendel | Austria |
| Island Trading | Helen Bennett | UK |
| Laughing Bacchus Winecellars | Yoshi Tannamuri | Canada |
| Magazzini Alimentari Riuniti | Giovanni Rovelli | Italy |
Define an HTML Table
A table in HTML consists of table cells inside rows and columns.
Example
Example Code
htmlTable Cells
Each table cell is defined by a
<td> and a </td> tag.
td
stands for table data.
Everything between <td> and </td>
is the content of a table cell.
Example
Example Code
htmlNote: A table cell can contain all sorts of HTML elements: text, images, lists, links, other tables, etc.
Table Rows
Each table row starts with a
<tr> and ends with a </tr> tag.
tr
stands for table row.
Example
Example Code
htmlYou can have as many rows as you like in a table; just make sure that the number of cells are the same in each row.
Note: There are times when a row can have fewer or more cells than another. You will learn about that in a later chapter.
Table Headers
Sometimes you want your cells to be table header cells. In those cases use the
<th> tag instead of the
<td> tag:
th
stands for table header.
Example
Example Code
htmlBy default, the text in <th> elements
are bold and centered, but you can change that with CSS.
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 |
For a complete list of all available HTML tags, visit our HTML Tag Reference.