HTML Tables
HTML Table 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 |
Defining an HTML Table
An HTML table is defined with the
<table> tag.
Each table row is defined with the
<tr> tag. A table header is
defined with the
<th> tag. By default, table headings are
bold and centered. A table data/cell is defined with the
<td> tag.
Example
<table style="width:100%">
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
</table>
Note: The <td> elements are the data containers of the table.
They can contain
all sorts of HTML elements; text, images, lists, other tables, etc.
HTML Table - Adding a Border
If you do not specify a border for the table, it will be displayed without borders.
A border is set using the CSS
border property:
Example
table, th, td
{
border: 1px solid black;
}
Remember to define borders for both the table and the table cells.
HTML Table - Collapsed Borders
If you want the borders to collapse into one border, add the CSS
border-collapse
property:
Example
table, th, td {
border: 1px solid black;
border-collapse: collapse;}
HTML Table - Adding Cell Padding
Cell padding specifies the space between the cell content and its borders.
If you do not specify a padding, the table cells will be displayed without padding.
To set the padding, use the CSS
padding property:
Example
th, td {
padding: 15px;}
HTML Table - Left-align Headings
By default, table headings are bold and centered.
To left-align the table headings, use the CSS
text-align property:
Example
th {
text-align: left;}
HTML Table - Adding Border Spacing
Border spacing specifies the space between the cells.
To set the border spacing for a table, use the CSS
border-spacing property:
Example
table {
border-spacing: 5px;}
Note: If the table has collapsed borders, border-spacing has no effect.
HTML Table - Cells that Span Many Columns
To make a cell span more than one column, use the
colspan attribute:
Example
<table style="width:100%">
<tr>
<th>Name</th>
<th colspan="2">Telephone</th>
</tr>
<tr>
<td>Bill Gates</td>
<td>55577854</td>
<td>55577855</td>
</tr>
</table>
HTML Table - Cells that Span Many Rows
To make a cell span more than one row, use the
rowspan attribute:
Example
<table style="width:100%">
<tr>
<th>Name:</th>
<td>Bill Gates</td>
</tr>
<tr>
<th rowspan="2">Telephone:</th>
<td>55577854</td>
</tr>
<tr>
<td>55577855</td>
</tr>
</table>
HTML Table - Adding a Caption
To add a caption to a table, use the
<caption> tag:
Example
<table style="width:100%">
<caption>Monthly savings</caption>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$50</td>
</tr>
</table>
Note: The <caption> tag must be inserted immediately after the <table> tag.
A Special Style for One Table
To define a special style for a special table, add an
id
attribute to the table:
Example
<table id="t01">
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
</table>
Now you can define a special style for this table:
table#t01 {
width: 100%;
background-color: #f1f1c1;}
And add more styles:
table#t01 tr:nth-child(even) {
background-color: #eee;}
table#t01 tr:nth-child(odd) {
background-color: #fff;}
table#t01 th {
color: white;
background-color: black;}
Chapter Summary
- Use the HTML
<table> element to define a table
- Use the HTML
<tr> element to define a table row
- Use the HTML
<td> element to define a table data
- Use the HTML
<th> element to define a table heading
- Use the HTML
<caption> element to define a table caption
- Use the CSS
border property to define a border
- Use the CSS
border-collapse property to collapse cell borders
- Use the CSS
padding property to add padding to cells
- Use the CSS
text-align property to align cell text
- Use the CSS
border-spacing property to set the spacing between cells
- Use the
colspan attribute to make a cell span many columns
- Use the
rowspan attribute to make a cell span many rows
- Use the
id attribute to uniquely define one table
HTML Exercises
HTML Table Tags
HTML Tables
HTML Table 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 |
Defining an HTML Table
An HTML table is defined with the
<table> tag.
Each table row is defined with the
<tr> tag. A table header is
defined with the
<th> tag. By default, table headings are
bold and centered. A table data/cell is defined with the
<td> tag.
Example
<table style="width:100%">
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
</table>
Note: The <td> elements are the data containers of the table.
They can contain
all sorts of HTML elements; text, images, lists, other tables, etc.
HTML Table - Adding a Border
If you do not specify a border for the table, it will be displayed without borders.
A border is set using the CSS
border property:
Example
table, th, td
{
border: 1px solid black;
}
Remember to define borders for both the table and the table cells.
HTML Table - Collapsed Borders
If you want the borders to collapse into one border, add the CSS
border-collapse
property:
Example
table, th, td {
border: 1px solid black;
border-collapse: collapse;}
HTML Table - Adding Cell Padding
Cell padding specifies the space between the cell content and its borders.
If you do not specify a padding, the table cells will be displayed without padding.
To set the padding, use the CSS
padding property:
Example
th, td {
padding: 15px;}
HTML Table - Left-align Headings
By default, table headings are bold and centered.
To left-align the table headings, use the CSS
text-align property:
Example
th {
text-align: left;}
HTML Table - Adding Border Spacing
Border spacing specifies the space between the cells.
To set the border spacing for a table, use the CSS
border-spacing property:
Example
table {
border-spacing: 5px;}
Note: If the table has collapsed borders, border-spacing has no effect.
HTML Table - Cells that Span Many Columns
To make a cell span more than one column, use the
colspan attribute:
Example
<table style="width:100%">
<tr>
<th>Name</th>
<th colspan="2">Telephone</th>
</tr>
<tr>
<td>Bill Gates</td>
<td>55577854</td>
<td>55577855</td>
</tr>
</table>
HTML Table - Cells that Span Many Rows
To make a cell span more than one row, use the
rowspan attribute:
Example
<table style="width:100%">
<tr>
<th>Name:</th>
<td>Bill Gates</td>
</tr>
<tr>
<th rowspan="2">Telephone:</th>
<td>55577854</td>
</tr>
<tr>
<td>55577855</td>
</tr>
</table>
HTML Table - Adding a Caption
To add a caption to a table, use the
<caption> tag:
Example
<table style="width:100%">
<caption>Monthly savings</caption>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$50</td>
</tr>
</table>
Note: The <caption> tag must be inserted immediately after the <table> tag.
A Special Style for One Table
To define a special style for a special table, add an
id
attribute to the table:
Example
<table id="t01">
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
</table>
Now you can define a special style for this table:
table#t01 {
width: 100%;
background-color: #f1f1c1;}
And add more styles:
table#t01 tr:nth-child(even) {
background-color: #eee;}
table#t01 tr:nth-child(odd) {
background-color: #fff;}
table#t01 th {
color: white;
background-color: black;}
Chapter Summary
- Use the HTML
<table> element to define a table
- Use the HTML
<tr> element to define a table row
- Use the HTML
<td> element to define a table data
- Use the HTML
<th> element to define a table heading
- Use the HTML
<caption> element to define a table caption
- Use the CSS
border property to define a border
- Use the CSS
border-collapse property to collapse cell borders
- Use the CSS
padding property to add padding to cells
- Use the CSS
text-align property to align cell text
- Use the CSS
border-spacing property to set the spacing between cells
- Use the
colspan attribute to make a cell span many columns
- Use the
rowspan attribute to make a cell span many rows
- Use the
id attribute to uniquely define one table
HTML Exercises
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 |
| 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 |
