HTML - Tutorial 11

HTML Tutorial 11

Prepared by: Anthony Larrain

Tables

HTML tables allow you to arrange text and graphics into multiple rows and columns.
Tags used in creating tables.

The <table> </table> tags define the beginning and end of a table.
The <tr> </tr> tags define the rows of the table.
The <td> </td> tags creates the data cells.

The actual content is placed within the td tags.
A data cell can contain text, images, lists, paragraphs, horizontal rules, tables, etc.

Example 1

The following piece of code:

<table> <tr> <td>Data Cell One</td> <td>Data Cell Two</td> </tr> <tr> <td>Data Cell Three</td> <td>Data Cell Four</td> </tr> </table>

Produces this page table1.html
The size of a table and its cells automatically adjust to fit the data.
You can control the size of a table using the width attribute.

Example 2

You can specify the value for the width in percentages or pixels.
In Example 2 the second line specifies the width in pixels.
See table2.html and table3.html
You can place a border around the table cells using the border attribute

Example 3

See table4.html
You can control the amount of padding within the table cells using the cellpadding attribute.
You can control the amount of space between the cells by using the cellspacing attribute.

Example 4

See table5.html
Use the <th> </th> tags to add a heading for each column.

Example 5

<table width="50%" border="2"> <tr> <th>Column1</th> <th>Column2</th> </tr> <tr> <td>Data Cell One</td> <td>Data Cell Two</td> </tr> <tr> <td>Data Cell Three</td> <td>Data Cell Four</td> </tr> </table>

See table6.html
Notice the headings are centered horizontally, and the data in the data cells are left justified.
You can control the alignment of the heading and data within each table cell by using the align attribute.
Values to the align attribute are, left, center, right
See table7.html. Don't forget to view the source.

Design Tip

Use CSS to align headings and data
See table8.html. Don't forget to view the source.

Multimedia and the World Wide Web