HTML Tables Tutorial

Here is a brief HTML table tutorial. It is important that before beginning this tutorial, you know the HTML basics. You know that <b> does not center something, but rather bolds that item. Ok so lets begin.


Tables are the lifeblood of HTML. They allow you to almost perfectly place text, images, and other media, exactly where you want it. You can make a table conform to the users screen width, or you can be rigid and make the table any number of pixels wide. The new standard is a 600 pixel wide table, since most people are using 640×480 resolution, they won’t have to scroll both horizontally and vertically.


There are really only three basic tags for a table. They are:
<table> = table tag
<tr> = table row
<td> = table data


Most important is that a <td> is always inside a <tr>, which is always inside a <table>.


A very basic table would look like this


<table>
<tr>
<td>
Hi Mom
</td>
</tr>
</table>


Now the fun begins when we start to add to the table. Remember when you were little and you would build playing card houses, that the most important thing was the foundation? Well the same applies to HTML Tables. By properly placing the

tag, with the right attributes you will build the solid foundation you need to make a great card house, oops I mean table.


I would like to make a 3 column, 3 row table so you can see a basic table, then we will add attributes to it, to flavor it up. So, lets get started!

Cell 1 Cell 2 Cell 3
Cell 4 Cell 5 Cell 6
Cell 7 Cell 8 Cell 9


Here is the HTML code for the table above:

<table BORDER=1>

<TR><TD>Cell 1</td><td>Cell 2</td><td>Cell 3</td></tr>

<TR><TD>Cell 4</td><td>Cell 5</td><td>Cell 6</td></tr>

<TR><TD>Cell 7</td><td>Cell 8</td><td>Cell 9</td></tr>

</table>



It is at this point I would like to remind you that most HTML tags require and en tag. This is especially important with table tags. One missing </td> and the table might not show up or could be skewed.



From here on, I will only print the HTML Code that changes. This will help you to see what has changed, and how it looks in both the HTML and on screen.



First HTML change in the table will be to remove the border. Change the border tag to read BORDER=0 and this is how the table looks:

Cell 1 Cell 2 Cell 3
Cell 4 Cell 5 Cell 6
Cell 7 Cell 8 Cell 9



As you see, now there is no border. This is commonly referred to as Borderless Tables.


Next we will add some cellpadding to the table. This gives each cell some space to breathe. So add CELLSPACING=5 to the table tag.

Cell 1 Cell 2 Cell 3
Cell 4 Cell 5 Cell 6
Cell 7 Cell 8 Cell 9


There are loads of different options for tables. There are Cellpadding, Cellspacing, border, align, valign, and many others.


Cellpadding – Space within the cells

Cellspacing – Space between the cells

Border – Puts a border around the cells and table

Align – aligns the content of the table (left, right, center)

Valign – vertically aligns the content (top, middle, bottom)




Align and Valign can be used in td,tr, and table tags. Cellpadding, Cellspacing and Border should only be used in the table tag.



Next we will look at colspan and rowspan. Rowspan allows you to stretch one cell to more than one cell.

Cell 1
Cell 4 Cell 5 Cell 6
Cell 7 Cell 8 Cell 9



To accomplish this, you have to use the colspan attribute. Just add colspan=2 to the <td>, and bam!


Rowspan works similar.

Cell 1 Cell 2 Cell 3
Cell 5 Cell 6
Cell 8 Cell 9



To accomplish this, add ROWSPAN=3, to your <td> tag.


Here is a list of all table attributes, you should consider this your, “cheat sheet.”


WIDTH=”600″>
























































Table Attribute List


Define Table


<TABLE></TABLE>


 


Columns to Span


<TH COLSPAN=?>


 


Rows to Span


<TH ROWSPAN=?>


 


Desired Width


<TH WIDTH=?>


(in pixels)


Width Percent


<TH WIDTH=”%”>


(percentage of table)


Cell Color


<TH BGCOLOR=”#$$$$$$”>


 


Table Caption


<CAPTION></CAPTION>


 


Alignment


<CAPTION ALIGN=TOP|BOTTOM>


(above/below table)


Table Border


<TABLE BORDER=?></TABLE>


 


Cell Spacing


<TABLE CELLSPACING=?>


 


Cell Padding


<TABLE CELLPADDING=?>


 


Desired Width


<TABLE WIDTH=?>


(in pixels)


Width Percent


<TABLE WIDTH=”%”>


(percentage of page)


Table Row


<TR></TR>


 


Alignment


<TR ALIGN=LEFT|RIGHT| CENTER|MIDDLE|BOTTOM
VALIGN=TOP|BOTTOM|MIDDLE>


 


Table Cell


<TD></TD>


(must appear within table rows)


Alignment


<TD ALIGN=LEFT|RIGHT| CENTER|MIDDLE|BOTTOM
VALIGN=TOP|BOTTOM|MIDDLE>


 


No linebreaks


<TD NOWRAP>


 


Columns to Span


<TD COLSPAN=?>


 


Rows to Span


<TD ROWSPAN=?>


 


Desired Width


<TD WIDTH=?>


(in pixels)


Width Percent


<TD WIDTH=”%”>


(percentage of table)


Cell Color


<TD BGCOLOR=”#$$$$$$”>


 


Table Header


<TH></TH>


(same as data, except bold centered)


Alignment


<TH ALIGN=LEFT|RIGHT| CENTER|MIDDLE|BOTTOM
VALIGN=TOP|BOTTOM|MIDDLE>


 


No Linebreaks


<TH NOWRAP>