XHTML: Tables
From Academic Computing
Contents |
[edit] Purpose
Introduces students to the markup used to create tables on a web page and use tables to control layout and design.
[edit] Prerequisites
Students wishing to participate in this workshop should be familiar basic markup (HTML or XHTML) tags and attributes used for creating a simple web page. Students new to creating web pages should first attend the Introduction to XHTML workshop. Keying skills will be beneficial, as there is quite a bit of typing involved in writing markup. Students wishing to save any work created in class should bring a formatted floppy disk.
[edit] Why do I need tables?
There are two distinct reasons for learning the markup code used to create tables on a web page. One reason is that you simply need a table to contain data. The other reason is that you want to use a table to control the layout of your web page.
Even if you don't need to display data on your web page in a table format right now, you can certainly improve your site's layout by using tables. In the section below, you'll find several tables. All of them were created using the tags and attributes discussed in this handout.
[edit] Examples of Tables
The following tables have different looks and purposes, but they are all created using the same tags. Different attributes and different attribute values shape the table to fit the desired output.
[edit] Table Tags
The great thing about tables is that there aren't a lot of tags needed to create them, especially basic tables. All of the tables displayed above can be created with just five different tag sets, and only three of the five are absolutely necessary. The tags used to create a table are:
<table>…</table> This is the first tag and last tag used to designate a table. There are a variety of attributes that can be used to customize the table, and this handout will describe all of them.
<caption>…</caption> The caption tag goes right after the table tag and is used to give your table a title that is displayed at the top of the table. You can use CSS (that's another class) to set your captions to display below the table. However, the caption tag is not necessary to render a table.
<tr>…</tr> Sets a table row. All XHTML tables are row based, so for every row you want your table to have, you markup will require one set of <tr> tags. The <tr> tags are contained within the set of table tags.
<td>…</td> Creates a cell within a row to contain table data. The <td> tags are contained within the <tr> tags. You use one set of <td> tags for each cell within a row.
<th>…</th> Creates a cell within a row to contain a table head. The <th> tags are used in place of <td> tags. Text contained inside of a set of <th> tags will be bold and centered, so they are usually used only in the first row of a table.
Now that you know these few tags, create some very simple tables using them. Try the following:
[edit] Creating a Basic Table
<table border="2">
<caption>2X2 Table</caption>
<tr>
<td>top-left</td> <td>top-right</td>
</tr>
<tr>
<td>bottom-left</td> <td>bottom-right</td>
</tr>
</table>
The result of the above code should look something like this:
Remember, spacing in the markup doesn't affect the web page. Spaces were used here to keep the markup organized for easy reading and editing. Table markup can get pretty complex, so adopt a method of spacing out the sections early on. That way, when you need to go back to your table markup and change data around, errors can be minimized.
[edit] Table Attributes
To customize the look of a table, you'll need to add some attributes:
align="left | right | center" When used inside of the <table> tag, this attribute will set the location of your table on the page. If alignments "left" or "right" are used, text will wrap around the table just like the table was an image. When the align attribute is used inside of the <tr> or <td> tags, the contents of all of the cells in a row or a particular cell will be aligned as stated.
background="imgfilename" Use the background attribute to set an image (.gif or .jpg) as a background image for an entire table, entire row, or cell. The background attribute is rendered differently in MS Internet Explorer and Netscape Navigator; so check your web page in both browsers to make sure you want to use it.
bgcolor="colorname | hex code" When used inside of the <table> tag, this attribute will set the background color of the entire table. If used in the <tr> or <td> tags, this attribute will set the background color of a single row or a single cell.
border="pixels" Used in the <table> tag only; this attribute sets the thickness of the table borders. To make the borders invisible, use border="0" inside of the <table> tag.
cellpadding="pixels" Used in the <table> tag only; this attribute sets a margin around the contents of all the cells in a table.
cellspacing="pixels" Used in the <table> tag only; this attribute sets a space between the cells of a table.
colspan="# of columns" Use the colspan attribute inside of a <td> tag to create a wider than normal cell. In the sample tables on page two, the balance sheet table uses a colspan attribute in the cell containing the word "assets".
rowspan="# of rows" Use the rowspan attribute inside of a <td> tag to create a taller than normal cell. In the sample tables on page two, the "fruit fly statistics" table uses a rowspan attribute in the cell containing the words "red eyes".
height="pixels | percentage" Used in the <table> tag and the <td> tag; this attributes sets a minimum height for the table or a particular cell. If used in a cell, all other cell within that row will have the same minimum height.
width="pixels | percentage" Used in the <table> tag and the <td> tag; this attribute sets the width of the table or cells. If 100% is used to set the width of a table, the table will take up the full width of the display window. If 25% width is set in a cell, the cell will be 25% of the table's width.
valign="top | middle | bottom" Used inside of a <tr> tag or a <td> tag; Sets the vertical alignment of the contents of cells to the top of the cell, middle of the cell, or bottom of the cell.
[edit] Enhancing the Basic Table
Armed with the attributes listed above, you can now alter your basic tables and fully control how they will be displayed in a web browser.
To use tables for a layout tool, it is best to make a pencil/paper sketch of how you want your site to look. From there, draw a table over the sketch to determine the layout of the table, how many rows you'll need, and how many cells will be in each row. You'll find that a complex looking site can be made with a very basic table. The images on the next page are screen captures of a web site. By drawing table borders over the major sections of the site, you can determine that to create a similar layout, you'll need a table with three rows. The first row has two cells, the second row has one cell, and the third row has three cells. The first cell in the first row would use a colspan="2" attribute, while the first cell in the second row would use a colspan="3" attribute.
Try creating a table that would result in this layout before looking at the table code below the screen captures.
<table width="600" border="2"> <tr><!-- first row --> <td colspan="2" width="400">.</td> <td width="200" bgcolor="#999999">.</td> </tr> <tr><!-- second row --> <td colspan="3" width="600" bgcolor="#006600">.</td> </tr> <tr><!-- third row --> <td height="100" bgcolor="#999999">.</td> <td>.</td> <td>.</td> </tr> </table>
The table code above will create a table that looks similar to this:
Can you picture how the table is going to control the layout of the web page? Once the cells of the table have been created, you can then use height/width attributes, bgcolor attributes, and align/valign attributes to customize the shape of the table and cells. Put the content into the appropriate cell and you've got a very controlled layout. Using tables to create web layout will help ensure that your site looks the same no matter what size monitor or what resolution the visitor may be using.
If you visit any professional site, especially news sites, you'll find that tables are being used to control the structure of the web site. View the source code and you'll find examples of table tags and attributes that are listed in this handout.
