tutorial-Basic Tables

Author: * Laurels Curius - 0 Posts on this thread out of 2,713 Posts sitewide.
Date: Nov 28, 2003 - 09:56

Before we begin, sketch out your desired table on a peice of paper, so you know in advance how many collumns, rows, whether or not any of these need to span several other columns/rows and just what you need to accomodate your desires content. Now for table attributes and explanations.

The Table Tag:
<table></table>
Common attributes found inside the Table tag (each attribute acts as an anchor link, and will take you to where that attribute is covered in this tutorial):
width cellpadding cellspacing border bordercolor bgcolor background align, valign

Table Rows (the horizontal as in left-right sections in tables) are designated by <tr> and Columns (vertical up and down sections, that act as the actual cells for content) are <td>, both also have closing tags, so in a table they would appear like this:

Common attributes found inside Rows and Collumns:

colspan, rowspan, width, height, bgcolor, background.

A basic two collumn/two row table looks like this:

Example:

Coding:

Cell 1	Cell 2
Cell 3	Cell 4

Width can be determined in the overall table tag by using either percentages (like above) or actual pixel sizes like this:

Example: Coding:

This table's width is set at 150 pixels
<table width="150" border="1" cellpadding="10">
<tr><td>
This table's width is set at 150 pixels
</td></tr>
</table>

Cellpadding determines how much space is around each cell's data (determined in pixels here), these act as buffers in your table to prevent the content butting directly up against the edges of the table, like so:

Example: Coding:

This table's cellpadding is set at 0
<table border="1" cellpadding="0">
<tr><td>
This table's cellpadding is set at 0
</td></tr>
</table>

This table's cellpadding is set at 10
<table border="1" cellpadding="10">
<tr><td>
This table's cellpadding is set at 10
</td></tr>
</table>

Cellspacing acts as a buffer between the cells (or <td>'s) themselves instead of the data, like so:

Example: Coding:

This table's cellspacing is set at 0
<table border="1" cellpadding="10" cellspacing="0">
<tr><td>
This table's cellspacing is set at 0
</td></tr>
</table>

This table's cellspacing is set at 10
<table border="1" cellpadding="10" cellspacing="10">
<tr><td>
This table's cellspacing is set at 10
</td></tr>
</table>

Border attributes can be set inside the table overall, and also determined per data cell (<td>'s) like so:

Example: Coding:

This table's border is set at 0
<table border="0" cellpadding="10">
<tr><td>
This table's border is set at 0
</td></tr>
</table>

This table's border is set at 10
<table border="10" cellpadding="10">
<tr><td>
This table's border is set at 10
</td></tr>
</table>

Bordercolor attributes are not compatible across all browsers or browser versions, but can be handy and appealing styles to use (I use them in the welcome statement and in my domus) and have an all around color attribute, or you can add in shadow and highlight attributes like so:

Example: Coding:

This table's border is set at 6, with a color value of (hex code) #006699
<table border="6" bordercolor="#006699" cellpadding="10">
<tr><td>
This table's border is set at 6, with a color value of (hex code) #006699
</td></tr>
</table>

This table's bordercolordark is (hex) #006699 and light at #00ccff
<table border="6" bordercolordark="#006699" bordercolorlight="#00ccff" bordercolor="#006699" cellpadding="10">
<tr><td>
This table's bordercolordark is (hex) #006699 and light at #00ccff
</td></tr>
</table>

Background colors or images attributes can be set for the whole table, or each cell individually using hex codes, simple color names (like here) or using a background image source.

Using background color name in value is coded as such: bgcolor="colorname"

Using background hex code in value is coded as this: bgcolor="#6-digit hex number"

Using an image for your background is coded this way: background="http://url of your image.jpg"

Example: Coding:

This table's background is set at (hex code) 33ccff
<table border="1" bgcolor="#33ccff">
<tr><td>
This table's background is set at (hex code) 33ccff
</td></tr>
</table>

This table's background is set with an image url
<table border="1" background="backgroundurl.jpg" cellpadding="10">
<tr><td>
This table's background is set with an image url
</td></tr>
</table>

Cell 1 Cell 2

Cell 3 Cell 4
<table border="1" cellpadding="10">
<tr><td bgcolor="#99ccff">
Cell 1
</td><td bgcolor="#ffcccc">
Cell 2
</td></tr>
<tr><td bgcolor="#99cc99">
Cell 3
</td><td bgcolor="#9999cc">
Cell 4
</td></tr>
</table>

Align(horizontal alignment=left to right) and Valign(vertical alignment=up and down) are table (and cell) attributes used to determine alignment on a page or within a table. Using the basic table from the top, we'll align a table here for the center of the page:

Cell 1 Cell 2

Cell 3 Cell 4

And the coding for it is as follows:

The Align attribute's values are "left" "right" and "center", the valign attributes values are "top" "bottom" and "middle". Here's another table with individual cell data in differeing alignments:

cell1- align=right, valign=middle cell 2- align=left, valign=top cell 3- align=right, valign=bottom

And the coding for the above table is as follows:

<table border="1" cellpadding="10" align="center">
<tr>
<td align="center" valign="middle">cell1- align=right, valign=middle</td>
<td align="left" valign="top">cell 2- align=left, valign=top</td>
<td align="right" valign="bottom">cell 3- align=right, valign=bottom</td>
</tr></table>

Colspan and rowspan are used inside of the <td> tag and are attributes used to determine how many cells, rows or columns it spans across. Colspan is used to determine how many cells or columns it will span across. Here is an example of a table using a colspan value (used here in the td, can be also used for table headers or <th>):

Example: Coding:

Cell 1-uses a colspan value of 2

Cell 2 Cell 3
<table border="1" cellpadding="10">
<tr><td colspan="2">
Cell 1-uses a colspan value of 2
</td></tr> <tr>
<td>Cell 2</td>
<td>Cell 3</td>
</tr></table>

Rowspan is used to determine how many cells or rows it will span across. Here is an example of a table using a rowspan value (also available for use in <th> tags):

Example: Coding:

Cell 1 Cell 2- with rowspan of 2

Cell 3
<table border="1" cellpadding="10">
<tr>
<td>Cell 1</td>
<td rowspan="2">Cell 2- with rowspan of 2
</td></tr>
<td>Cell 3</td>
</tr></table>

I have not gone into detail or even discussed some other table attributes, as I simply never use them myself and researching more would have made this tutorial even harder to write (sorry). In fact, since I have hardly used either rowspan or colspan more than 5 times in several years, I had to look it up a bit first. Since obviously the more you use different attributes allows for greater ease in creating any html coding, practice makes perfect. Use Arachne's handy HTML Test Bed created by Bryce to practice and see your table coding in effect, it's very good for correcting your mistakes as you go along. Also, her code converter for code sharing tool linked in entrance made this entire tutorial take about half as much time as it would have!

Here are some more tutorial sites for better understanding html tables, and most are how I learned to do them myself.

HTML Made Really Easy
Annabella's HTML Help
Lissa Explains it All
HTML Goodies