Marketing for Libraries Logo

HTML Section: Tables

Tables are a very useful tool for organizing information. They are often used in sharing data and also in navigation. They have two functions: data display, and layout.

First, they can be used to organize data in rows and columns.

Second, tables can be used to help organize content elements on a page such as graphics and text. Increasingly, people are encouraged NOT to use tables for layout. Instead, use the power of CSS for most layout needs.

In the past, tables were also used for page layout. However with the introduction of CSS, tables are used for layout less frequently.

HTML Tables

Tables are defined with the <table> tag. Be sure to include both a start and end tag for your table.

Each table is divided into row using the <tr> tag and data cells using the <td> tag.

The border attribute can be used to display borders.

The table header <th> tag is used to make the first row bold and centered.

Include a <caption> tag to describe the table. This is also helpful to those using a screen reader.

It's a good idea to add cellpadding to create space between the cell content and the borders as well as cellspacing to increase the distance between cells.

Width can be set as relative or absolute. Percents are used for relative. In other words, the table adjusts related to the width of the page. Set the width to 100% if you wish the table to span the width of the page. Pixels are used for absolute.

<table border="1" cellpadding="10" cellspacing="5">
<caption>Pet Shop Inventory</caption>
<tr>
<th>Dogs</th>
<th>Cats</th>
</tr>
<tr>
<td>beagles</td>
<td>calico</td>
</tr>
<tr>
<td>collies</td>
<td>siamese</td>
</tr>
</table>

Pet Shop Inventory
Dogs Cats
beagles calico
collies siamese

try itTry It!
Go to w3schools and read about Tables.
Use the Try It Yourself buttons to practice coding.

CSS Table Styles

When setting up the CSS for your tables, think about how you'd like your tables to be displayed.

You can specify properties for your table, th, and td elements.

Think about the table's width and height. These can be expressed up to 100% or by pixel such as 50px.

In terms of text alignment, indicate text-align such as left, right, or center as well as vertical-align top, bottom, or middle.

Padding is important. It allow you to control the space between the border and the content on the table. Express it in pixels such as 10px.

Colors including the borders, text, and backgrounds can be indicated.

Examine the sample below:

table, td, th {border:1px solid red;}
td {text-align:right; vertical-align:bottom; height:50px; padding:15px;}
th {background-color:red; color:yellow;}

try itTry It!
Go to w3schools and read about the CSS Tables.
Use the Try It Yourself buttons to practice coding.


| eduScapes | IUPUI Online Courses | Teacher Tap | 42eXplore | About Us | Contact Us | © 2006-2013 Annette Lamb & Larry Johnson