Materials Collection

Tables

Onto tables!! Tables are an easy way of grouping together data and organizing it into a simple fashion. Read on to learn about information organization method one.

• To start a table, insert the main table element <table> Within this element can be several different attributes ranging from height and width to cellspacing and cellpadding. To start putting data into your table, include the <tr> element. It begins a new table row. Then include the <td> element and start putting your information in. Be sure to close all three elements before you go on. Check out the example below:

<table width='100' height='50' cellspacing='0' cellpadding='0' align='center' border='1' bordercolor='000000'>
<tr>
<td align='center'><font size='1'>Box One</td>
<td align='center'><font size='1'>Box Two</td>
</tr>
<tr>
<td align='center'><font size='1'>Box Three</td>
<td align='center'><font size='1'>Box Four</td>
</tr>
</table>

Box One	Box Two
Box Three	Box Four

• Now that you understand the basic table structure, it's time to move on to other features of a table. This includes table headers, captions, footers, and the body. You can give a table headers using the th element. See how it is used below: The following table also implies the use of the caption attribute. Only one caption is allowed for each table therefore this attribute is rarely ever used.

<table width='100' height='50' cellspacing='0' cellpadding='0' align='center' border='1' bordercolor='EA6016'>
<caption><font size='2'>Different Boxes</caption>
<th><font size='2'>Box #</th><th><font size='2'>Box #</th>
<tr>
<td align='center'><font size='1'>Box One</td>
<td align='center'><font size='1'>Box Two</td>
</tr>
<tr>
<td align='center'><font size='1'>Box Three</td>
<td align='center'><font size='1'>Box Four</td>
</tr>
</table>

Different Boxes
Box #	Box #
Box One	Box Two
Box Three	Box Four

• As you can tell of the table above, there is the caption on the top of the table that says Different Boxes and the two table headers that say Box # in bold. You can specify whatever size font you would rather prefer, but the default is 3 just in case you decide to leave it empty. The table header command th can also be replaced by the thead command which does the same thing.

• Now, to see some table footers in action. Table footers are enforced using the tfoot command. Take a look below. Table footers are different from table headers because instead of instantly making the text bold and labeling the cell columns, the table footer command must group together a table row or rows to make a table footer. That's why I had to specify the bold element to make the Box # text to look like the header.

<table width='100' height='50' cellspacing='0' cellpadding='0' align='center' border='1' bordercolor='000000'>
<caption><font size='2'>Different Boxes</caption>
<th><font size='2'>Box #</th><th><font size='2'>Box #</th>
<tr>
<td align='center'><font size='1'>Box One</td>
<td align='center'><font size='1'>Box Two</td>
</tr>
<tr>
<td align='center'><font size='1'>Box Three</td>
<td align='center'><font size='1'>Box Four</td>
</tr>
<tfoot><tr><td align='center'><font size='2'><b>Box #</b></td><td align='center'><font size='2'><b>Box #</b></td></tr></tfoot>
</table>

Different Boxes
Box #	Box #
Box One	Box Two
Box Three	Box Four
Box #	Box #

• An easy way to group all your table columns together instead of having to type the alignment into each and every td element is to use column grouping. Take a look below:

<table width='200' height='100' cellspacing='0' cellpadding='0' align='center' border='1' bordercolor='000000'>
<caption><font size='2'>Column Grouping</caption>
<colgroup align='right'>
<colgroup align='left'>
<colgroup align='center'>
<colgroup align='right'>
<tr>
<td><font size='1'>content</td>
<td><font size='1'>content</td>
<td><font size='1'>content</td>
<td><font size='1'>content</td>
</tr>
<tr>
<td><font size='1'>content</td>
<td><font size='1'>content</td>
<td><font size='1'>content</td>
<td><font size='1'>content</td>
</tr>
</table>

Column Grouping
content	content	content	content
content	content	content	content

• I'm sure you can tell that the columns are respectively right, left, center, right.

• Off to the side, there are many attributes available under the table element, but one of the most important is table width. The table width can either be a fixed pixel, a percentage, or a proportion. Tables often look weird in different screen resolutions when forced into bigger browsers or smaller ones. Here are examples of the three different types of widths.

width='768'
width='75%'
width='3*'

• The 3* proportion is explained to be oen third to the table and leave the rest for the layout. This method is rearely used in conventional authoring.

• Two very helpful attributes are cellspacing and cellpadding. Cellspacing and cellpadding assist in providing a more open table (with more space instead of all the text stuck together). The first example is the table we had above. The second example is a table with more cellspacing and cellpadding used. Take a look at the difference.

Different Boxes
Box #	Box #
Box One	Box Two
Box Three	Box Four
Box #	Box #

<table width='100' height='50' cellspacing='10' cellpadding='10' align='center' border='1' bordercolor='000000'>
<caption><font size='2'>Different Boxes</caption>
<th><font size='2'>Box #</th><th><font size='2'>Box #</th>
<tr>
<td align='center'><font size='1'>Box One</td>
<td align='center'><font size='1'>Box Two</td>
</tr>
<tr>
<td align='center'><font size='1'>Box Three</td>
<td align='center'><font size='1'>Box Four</td>
</tr>
<tfoot><tr><td align='center'><font size='2'><b>Box #</b></td><td align='center'><font size='2'><b>Box #</b></td></tr></tfoot>
</table>

Different Boxes
Box #	Box #
Box One	Box Two
Box Three	Box Four
Box #	Box #

• As you can tell, a lot more space has been added to the table cells. You can either lower the amount of cellspacing and cellpadding to create a tighter table or increase the amount of cellspacing and cellpadding to make the table looser. Cellpadding and cellspacing can be used separately.

• The last thing we are going to work with are row-span and column-span. These are very handy tools when you have uneven numbers of table cells and you want to create a smoother layout design. To start off, we will work with column-span. The first example is a table without column-span. It looks odd since the second row only has two cells and the second cell forces the first row cell to enlarge. Take a look at the second table and what column-span can do.

<table width='320' height='100' cellspacing='0' cellpadding='0' align='center' border='1' bordercolor='000000'>
<tr>
<td width='80' valign='top' align='left'><font size='1'>This is my first table cell in the top row.</td>
<td width='80' valign='top' align='left'><font size='1'>This is my second table cell in the top row.</td>
<td width='80' valign='top' align='left'><font size='1'>This is my third table cell in the top row.</td>
<td width='80' valign='top' align='left'><font size='1'>This is my fourth table cell in the top row.</td>
</tr>
<tr>
<td width='80' valign='top' align='left'><font size='1'>This is my first table cell in the bottom row.</td>
<td width='240' valign='top' align='left'><font size='1'>This is my second table cell in the bottom row.</td>
</tr>
</table>

This is my first table cell in the top row. This is my second table cell in the top row. This is my third table cell in the top row. This is my fourth table cell in the top row.

This is my first table cell in the bottom row. This is my second table cell in the bottom row.

<table width='320' cellspacing='0' cellpadding='0' align='center' border='1' bordercolor='000000'>
<tr>
<td width='80' valign='top' align='left'><font size='1'>This is my first table cell in the top row.</td>
<td width='80' valign='top' align='left'><font size='1'>This is my second table cell in the top row.</td>
<td width='80' valign='top' align='left'><font size='1'>This is my third table cell in the top row.</td>
<td width='80' valign='top' align='left'><font size='1'>This is my fourth table cell in the top row.</td>
</tr>
<tr>
<td width='80' valign='top' align='left'><font size='1'>This is my first table cell in the bottom row.</td>
<td width='80' colspan='3' valign='top' align='left'><font size='1'>This is my second table cell in the bottom row.</td>
</tr>
</table>

• Notice how the second cell in the first row is no longer stretched out and the second cell in the second row is stretch out to its designated row? Yeah. This is good. Row-span isn't much different.

<table width='300' cellspacing='0' cellpadding='0' align='center' border='1' bordercolor='000000'>
<tr>
<td width='100' valign='top' align='left'><font size='1'>This is my first table cell in the top row.</td>
<td width='100' valign='top' align='left'><font size='1'>This is my second table cell in the top row.</td>
<td width='100' valign='top' align='left'><font size='1'>This is my third table cell in the top row.</td>
</tr>
<tr>
<td width='100' valign='top' align='left'><font size='1'>This is my first table cell in the bottom row.</td>
<td width='100' valign='top' align='left'><font size='1'>This is my second table cell in the bottom row.</td>
<td width='100' valign='top' align='left'><font size='1'>This is my third table cell in the bottom row.</td>
</tr>
</table>

This is my first table cell in the top row. This is my second table cell in the top row. This is my third table cell in the top row.

This is my first table cell in the bottom row. This is my second table cell in the bottom row. This is my third table cell in the bottom row.

<table width='300' cellspacing='0' cellpadding='0' align='center' border='1' bordercolor='000000'>
<tr>
<td width='100' rowspan='2' valign='top' align='left'><font size='1'>This is my first table cell in the top row.</td>
<td width='100' valign='top' align='left'><font size='1'>This is my second table cell in the top row.</td>
<td width='100' valign='top' align='left'><font size='1'>This is my third table cell in the top row.</td>
</tr>
<tr>
<td width='100' valign='top' align='left'><font size='1'>This is my second table cell in the bottom row.</td>
<td width='100' valign='top' align='left'><font size='1'>This is my third table cell in the bottom row.</td>
</tr>
</table>

This is my first table cell and it spans two rows. This is my second table cell in the top row. This is my third table cell in the top row.

This is my second table cell in the bottom row. This is my third table cell in the bottom row.

• That's about all you need to build your own tables. If you think you are ready, go on to the frames tutorial.

Back

This is my first table cell in the top row.	This is my second table cell in the top row.	This is my third table cell in the top row.	This is my fourth table cell in the top row.
This is my first table cell in the bottom row.	This is my second table cell in the bottom row.