HTML Tables

HTML Tables at a glance.

To make this all easier to understand, copy and paste each table into an HTML document and look at the results in your browser.

Simple Table:
<table>
<tr>
<td>
Hello Hello!
</td>
</tr>
</table>

-We start with an opening table tag. <table>
-We then put in our table row with the <tr> tag.
-We then put in our table cell with the <td> tag. (Why not tc then? We don't know!)
-This is where we always put our text, inside the cell tag.
-Then we put in our closing cell tag, closing row tag, and our closing table tag.


Now let's add some features to our HTML tables!

Insane Table:
<table width=100% height=300 bgcolor=green background=http://ilovethecode.com/images/iltc.gif align=center cellpadding=5 cellspacing=2 border=2 bordercolor=red>
<tr bgcolor=blue height=200 align=center>
<td width=150 height=300 bgcolor=green background=http://ilovethecode.com/images/iltc.gif align=center valign=middle rowspan=1 colspan=1 nowrap>
Hello Hello
</td>
</tr>
</table>


Here's the breakdown (for our example, some of our tags are overriding others but are included for completeness):

<table
width=100% <--- can be percent or leave off percent sign for pixels
height=300 <--- can be percent or leave off percent sign for pixels
bgcolor=green <--- background color of table - standard color or hex with pound symbol #CC9900
background=http://ilovethecode.com/images/iltc.gif <--- url to image, can be relative path
align=center <--- right left center (NOTE: right has always done strange things in Internet Explorer)
cellpadding=5 <--- padding inside each cell - around text (pixels)
cellspacing=2 <--- spacing outside each cell (pixels)
border=2 <--- border around and inside table (pixels)
bordercolor=red <--- color of border
>

<tr
height=200 <--- pixels
bgcolor=blue <--- background color of table row - standard color or hex with pound symbol #CC9900
align=center <--- right left center - will be used in all unspecified cells
>

<td
width=150 <--- can be percent or leave off percent sign for pixels
height=300 <--- pixels
bgcolor=green <--- background color of table - standard color or hex with pound symbol #CC9900
background=http://ilovethecode.com/images/iltc.gif <--- url to image, can be relative path
align=center <--- right left center
valign=middle <--- top middle bottom
rowspan=1 <--- how many rows to span from the top to the bottom of the table
colspan=1 <--- how many columns to span from the left to the right of the table
nowrap <--- prevents text from wrapping
>


Now for a more Reasonable Table:

<table width=500 border=1>
<tr>
<td rowspan=2 width=150 valign=bottom> Hello Hello </td>
<td> Hi Hi </td>
</tr>
<tr>
<td>Hi again</td>
</tr>
</table>

Notice that we only have one <td> tag in our second table row. That's because we said rowspan equals 2 meaning our first cell goes down into our second row.


Lastly, a Table nested inside another Table:
<table border=3 width=100% height=100%><tr><td align=center>
<table height=100 border=1><tr><td>Hello mate</td></tr></table>
</td></tr></table>


NOTE: Table, row, and cell tags can contain class= for style sheets as well.


Experiment alot with HTML tables. Things don't always work as expected, but when you run into trouble, set the border to 1 so you can see what's going on.

As always, different browsers will read things a little differently from each other.

And if you ever find yourself buried in a hundred tables that aren't working properly, get a text editor that shows you how many you've replaced on a "find and replace" and start going through your tags until you find one that doesn't match. Always assume you've done it wrong... the browser is usually right... I said "usually." *


* Back in the day when Netscape ruled and Internet Explorer was, well, a little more "less than perfect" than it is now, a table align=right tag would crash the IE browser. It's interesting that today, if you use the table align=right tag in certain instances, it will overlap following tables. Try it out, 'tis great fun :)




Resources:
The Classic BareBones Guide to HTML
Make Italic Text Using HTML
Make Text Bold Using HTML
Make Strikethrough Text Using HTML
Make a Line Return Using HTML
Make a New Paragraph Using HTML
HTML Codes

Previous Article: Make a New Paragraph Using HTML

Next Article: HTML Background

HTML, XHTML, and CSS, Sixth Edition ... Elizabeth Castro New $23.09	Creating Web Sites Matthew MacDonald New $19.77	Head First HTML with CSS & XHTML Eric Freeman, Elis... New $26.39
Pro CSS and HTML Design Patterns Michael Bowers New $29.69	JavaScript David Flanagan New $31.49	Dojo Matthew A. Russell... New $26.39
CSS Eric Meyer New $29.69	Struts 2 in Action Don Brown, Chad Da... New $29.69	Bulletproof Web Design Dan Cederholm New $26.39

Privacy Information