HTML Tables
HTML tables allow web developers to arrange data into rows and columns.
Example
|
Company |
Contact |
Country |
|
Company
01 |
0123456789 |
xyz |
|
Company
02 |
0123456789 |
xyz |
|
Company
03 |
0123456789 |
xyz |
|
Company
04 |
0123456789 |
xyz |
|
Company
05 |
0123456789 |
xyz |
|
Company
06 |
0123456789 |
xyz |
Define an HTML Table
A table in HTML consists of table cells inside rows
and columns.
Example
A simple HTML table:
<table>
<tr>
<th>Company</th>
<th>Contact</th>
<th>Country</th>
</tr>
<tr>
<td
Company 01</td>
<td>0123456789</td>
<td>xyz</td>
</tr>
<tr>
<td> Company 02</td>
<td>0123456789</td>
<td>
xyz </td>
</tr>
</table>
Table Cells
Each table cell is defined by a <td> and a </td> tag.
td stands for
table data.
Everything between <td> and </td> are the content of the table cell.
Example
<table>
<tr>
<td>Email</td>
<td>Name</td>
<td>Number</td>
</tr>
</table>
Note: 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
<table>
<tr>
<td>Email</td>
<td>Name</td>
<td>Number</td>
</tr>
<tr>
<td>example@mail.com</td>
<td>Name</td>
<td>0123456789</td>
</tr>
</table>
You 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 less 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
Let the first row be
table header cells:
<table>
<tr>
<th>Person
1</th>
<th>Person
2</th>
<th>Person
3</th>
</tr>
<tr>
<td>Emil</td>
<td>Name</td>
<td>Number</td>
</tr>
<tr>
<td>
example@mail.com </td>
<td>
Name </td>
<td>
Number</td>
</tr>
</table>
By 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 |
