HTML Tutorial 16

HTML Table Example

Number	First Name	Last Name	Points
1	Eve	Jackson	94
2	John	Doe	80
3	Adam	Johnson	67
4	Jill	Smith	50

---

Defining HTML Tables

Example

<table style="width:100%">
  <tr>
    <td>Jill</td>
    <td>Smith</td>
    <td>50</td>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td>
    <td>94</td>
  </tr>
</table>

Example explained:

Tables are defined with the <table> tag.

Tables are divided into table rows with the <tr> tag.

Table rows are divided into table data with the <td> tag.

A table row can also be divided into table headings with the <th> tag.

Table data <td> are the data containers of the table. They can contain all sorts of HTML elements like text, images, lists, other tables, etc. An HTML Table with a Border Attribute If you do not specify a border for the table, it will be displayed without borders. A border can be added using the border attribute: Example <table border="1" style="width:100%">   <tr>     <td>Jill</td>     <td>Smith</td>     <td>50</td>   </tr>   <tr>     <td>Eve</td>     <td>Jackson</td>     <td>94</td>   </tr> </table> To add borders, use the CSS border property: Example table, th, td {     border: 1px solid black; } An HTML Table with Collapsed Borders If you want the borders to collapse into one border, add CSS border-collapse: Example table, th, td {     border: 1px solid black;     border-collapse: collapse; } An HTML Table with 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 table, th, td {     border: 1px solid black;     border-collapse: collapse; } th,td {     padding: 15px; } HTML Table Headings Table headings are defined with the <th> tag. By default, all major browsers display table headings as bold and centered: Example <table style="width:100%">   <tr>     <th>Firstname</th>     <th>Lastname</th>     <th>Points</th>   </tr>   <tr>     <td>Eve</td>     <td>Jackson</td>     <td>94</td>   </tr> </table> To left-align the table headings, use the CSS text-align property: Example th {     text-align: left; } An HTML Table with 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; } 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>555 77 854</td>     <td>555 77 855</td>   </tr> </table> 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>555 77 854</td>   </tr>   <tr>     <td>555 77 855</td>   </tr> </table> An HTML Table With 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> Different Styles for Different Tables Most of the examples above use a style attribute (width="100%") to define the width of each table. This makes it easy to define different widths for different tables. The styles in the <head> section, however, define a style for all tables in a page. 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>Points</th>   </tr>   <tr>     <td>Eve</td>     <td>Jackson</td>     <td>94</td>   </tr> </table> Now you can define a different 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; } Need help? Try KimmyJusTips!  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 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