Table

Learning Objectives

1. Differentiate the data table from the layout table.
2. Use the <table> and </table> elements in a web page.
3. Create a borderless table for a horizontal navigation bar with text links.
4. Design tables using partition elements like <thead></thead> and <tbody></tbody>.
5. Create tables in a web page that span cells using rowspan and colspan attributes.
6. Improve the appearance of table using additional CSS properties.

Data Tables vs Layout Tables

Data tables

Very often holds numbers, but they can hold text and other types of content as well.

Layout tables

Are not limited to holding data - they are allowed to hold any type of content. Their purpose is to position that content with a row-column layout scheme.

Example of Data Table

Example of Layout Tables

Table Elements

• An HTML table is defined with the <table> and </table> tags.
• Each table row is defined with the <tr> and </tr> tags.
• A table header is defined with the <th> and </th> tags.
• By default, table headers are bold and centered.
• A table data or cell is defined with the <td> and </td> tags.

Formatting a Data Table

Students List Web Page With border Property

table, td, tr {
  border: thin solid;
}

Students List Web Page With border-collapse Property

table, td, tr {
  border-collapse: collapse;
}

Table head and Table body

thead

thead is used to group header content in an HTML table

tbody

tbody is used to group the body content in an HTML table.

Students List Web Page With thead and tbody Elements

thead {
  background-color: midnightblue;
}
 
tbody {
  background-color: lightblue;
}

Cell Spanning

Students List Web Page With border-collapse Property

<tr>
  <th colspan="3">Assignments</th>
  <th colspan="2">Laboratory</th>
  <th rowspan="2">Ability to Stay Awake</th>
</tr>

Table Size

The size of the table is define using width and height properties.

Table Alignment

The text-align property is used to set the horizontal alignment of the content in <th> and <td> elements.

The vertical-align property sets the vertical alignment of the content in <th> and <td>.

The value for vertical-align property can be top, bottom, or middle.

Horizontal Dividers

Use the border-bottom property to <th> and <td> for horizontal dividers.

Hoverable Table

Use the :hover selector on <tr> to highlight table rows on mouse over.

Example

tbody tr:hover {
  background-color: lightblue;
}