Guide to HTML, CSS and JavsScript (University at Buffalo Version)
Chapter 4: Creating a Table Web Page
HTML tables are a great way to display data in a columnar format. You create a table using the <table></table>
, <thead></thead>
, <tbody></tbody>
, <tr></tr>
, <th></th>
, and <td></td>
tags. The <table></table>
tags advise the web browser that a table structure is to be rendered. For each row in the table you use a set of <tr></tr>
tags. For the first row you use the <th></th>
tags for each set of column headings in your table. For the other rows you use the <td></td>
tags for each column. Each set of either <th></th>
or <td></td>
tags create a *cell* for the data in that table row. You can also use the <thead></thead>
and <tbody></tbody>
tags to define the table heading and the table body sections.
The <table> ... </table>
Tags
The <table>
tag is used to tell the b rowser to begin rendering a data table. The </table>
tag tells the browser where the data table ends.
Code for a Table
A simple table (with some inline CSS styles) could be defined with this HTML code:
<table> <thead> <tr style="background-color: pink; color: white;"> <th>Column 1 Heading</th> <th>Column 2 Heading</th> <th>Column 3 Heading</th> </tr> </thead> <tbody> <tr style="background-color: white; color: black;"> <td>Row 1 Column 1 Data</td> <td>Row 1 Column 2 Data</td> <td>Row 1 Column 3 Data</td> </tr> <tr style="background-color: light-grey; color: black;"> <td>Row 2 Column 1 Data</td> <td>Row 2 Column 2 Data</td> <td>Row 2 Column 3 Data</td> </tr> </tbody> </table>
<table>
TagsThe HTML code above would advise the browser to render a table similar to this:
Column 1 Heading | Column 2 Heading | Column 3 Heading |
---|---|---|
Row 1 Column 1 Data | Row 1 Column 2 Data | Row 1 Column 3 Data |
Row 2 Column 1 Data | Row 2 Column 2 Data | Row 2 Column 3 Data |
Task - Create a Table Web Page
For this task you will login to your web server account and create new web page, for example: *table.html
*. Your new web page should utilize the following HTML tags and include the following:
- A
<body>
tag that uses an appropriate style value to change the background color of the web page. - Appropriate
<table>
,<thead>
,<tbody>
,<tr>
,<th>
, and<td>
tags to create a table that has: - Three (3) columns (Font Faces, Font Sizes, Colors)
- Five (5) rows (different font faces, font sizes, and color codes in their appropriate face, size, and color).
- Use the
<th>
tag to create the headings for each column with background-color style value to change the color of the heading cells and the font-family and color style values to change the color of the font in the cell headings row - Use the CSS background-color style value on the table tag to change the color of the background of your table to a different color than the background of your web page
- Appropriate CSS styles values that change the font, font size, and font color in each table cell
This web page should also have a link back to your Home Page task web page.
You should then add an <a>
(anchor) tag to your Home Page web page that opens your table web page.