Comp25: Tables

Introduction to Tables

HTML allows a designer to add a table to a website. A table consists of a number of rows, and each row consists of multiple cells with information inside them. Here is an example of a table:

Item Price

Apples $0.65 ea

Grapes $1.25 ea

Watermelon $2.99 ea

Because tables are extremely flexible and allow you to easily position information side-by-side, they serve a variety of purposes besides just displaying data. Tables can be used for:

Lists of Products with Photos and Pricing
Navigation (Links and Menus)
Employee Phone Book
Whole-Page Layout

Table HTML Tags

There are four tags you must know to work with tables in HTML. They are:

The Table Tag <table>

This tag defines the start and end of a table. All contents of the table go inside this element. You can apply an overall style to the table such as its border, background color, font and size, by modifying this element.

The Table Row Tag <tr>

This tag indicates the beginning and ending of a new row of data. There are usually multiple Rows in a table, and each Row is broken down into cells.

The Table Header <th> and Table Data <td> Tags

Each cell within the row is either a Table Header or a Table Data. This is where you put the actual content of the cell.

Table Headers appear at the top row, and Table Data cells appear after that. They're really the same thing though. You don't have to use Table Headers in a table, they're just there if you need them.

Combining the Table tags

Here is how the sample table at the top of this page was coded in HTML:

<table>

Let's take a closer look at the code. We start (and end) with the <table> tag. This creates a brand new table for us to place all of our rows and data cells into. It's important that we don't forget the ending </table> tag when we are finished.

Following <table> is a <tr> tag which creates a new row. That row, which ends three lines later, has two th (table header) elements inside it. These header cells show up in a different style than the rest of the cells.

Following our first <tr> tag is three more <tr> tags... one for each of the remaining rows of data in our table. Each of those <tr> tags contains two <td> tags. The first <td> tag has the item, and the second has the price.

You'll note that every single tag has a matching end tag. The nesting of tags is very important in the coding of a table. Forgetting an ending tag can create unusual results in a browser.

Tables and Page Layout

If we wanted to create a nice-looking website for our visitors, we can use tables to create a structure appearance to ease with navigation and layout. Tables have special attributes and styles to control the alignment, height, and width of the table.

Consider the webpage you are looking at now. Aside from the header and footer which appears on every page, there is a section on the left for navigation and the main content area on the right. This effect is achieved using tables, and placing links and text inside the data cells. Try this example:

This simple table has only one row and two data cells: one for navigation on the left and another for content on the right. You can plug in as much code as you wish to either cell and the table will grow accordingly.

By adding your links to the left and body content to the right, you can help make the navigation of your website easier to understand and manage:

You'll see that our example above has now expanded to include four links on the left-hand column, as well as a paragraph which contains the company's phone number and email address. All that's needed now is to move the content in to the right column.

Here are a few examples of how you can use tables to create a layout for your website:

Table Styles

By default, tables look pretty boring. But like every other tag in HTML, tables and related tags can all be modified using style sheets.

There are many ways to stylize a table. Here are a few examples that you can add to your style sheet.

table {
border: 1 solid orange;
}

th{
background-color: orange;
color: white;
}

td {
padding: 0.5em;
border-top: 1 solid orange;
font-family: 'Comic Sans MS';
font-size:14px;
color:blue;
font-weight:bold;

}

Style Recap

Many of the same styles that you have already learned work with table, tr, th, and td. They include:

font styles such as font-family, font-size, and letter-spacing
paragraph styles such as text-align, padding, and line-height
background styles such as background-color and background-image
border styles such as border-color and border-width

New Styles for Tables

You can control the table and table data cells sizes by adding the the width attribute using inline formatting. Examples:

<table border="1" width="100%">

<tr>
<th width="15%">Product Code</th>
<th width="15%">Product Name</th>
<th width="50%">Description</th>
<th width="30%">Image</th>
</tr>

Or you can include some of the following tags in your style sheet.

vertical-align

By default, the alignment of a table cell is in the middle. This can look pretty bad most of the time.

td {
vertical-align: top;
}

Remember that many of these tags can be used for more than just the table element. This example sets the width of each cell to 25%. Assuming that there are four cells, this would create four identically-sized columns:

width

We can force the exact size of the table, or make it relative based on its surroundings.

table {
width: 350px;
}

table {
width: 100%;
}

td {
width: 25%;
}

height

Likewise, we can specify the height of a table, row, or cell:

td {
height: 200px;
}

Though it is usually better to let the browser base the height on the content of the cell. If you are trying to add additional spacing to your cells, use the padding style instead.

table-layout: fixed

When you specify the width of a table cell, it can sometimes adjust it based on the content you've given it. For example, if you have a really long word in a cell and have the cell's width set to only 50px, it will still grow wide enough to display the whole word.

This style overrides that behavior:

td {
table-layout: fixed;
}

border-collapse

By default, the browser will display small gaps between the cells of your table. If you do not want them, try this:

table {
border-collapse: collapse;
}