[skip nav] www.ackadia.com
ant worker


« HTML Tables »

Introduction



Below are examples of the difference effects you can achieve by creative use of syntax when formatting tables.
Note also that most formatting, especially background, fonts, table headers etc should not be done with CCS - Cascading Style Sheets.


September 2003 update
As part of Ackadia's overhaul I've revised the code be XHTML compatible. Technically tables are being called obsolete but I think it will be several years before that happens, if ever. I'll revisit table in the coming months when I cover style sheets

Important:
I've set the tables as transparent in my syles sheets and rather than do a work-around, or created an edited copy for this page alone I've used inline styles to replace the old HTML ones. Generally, this is a botch job (on purpose here) and I wholly recommend you learn CSS, but it gets the point over. To work it also requires another line adding to the header:

<meta http-equiv="Content-Style-Type" content="text/css" /> ~~~ This must go in your <head>
style="background: white" instead of bgcolor="white" and style="background-image: url(images/background.jpg)" instead of background="images/background.jpg"


September 1999 update
I've edited this page to call up the code for each table :-)


Jan 15 '99
I've just added examples of nested tables later - some nice effects are possible if you're feeling creative.






Get the code for table 1 below

<table> default is border="0"



Get the code for table 2 below

<table border="1">




Get the code for table 3 below

border="6" cellspacing="12" cellpadding="20"
<table border="6" cellspacing="12" cellpadding="20">



Get the code for table 4 below

bordercolor="blue" bordercolorlight="lime"
(Explorer only)
border="3"
<table border="3" bordercolor="blue" bordercolorlight="lime" cellpadding="20">



Get the code for table 5 below

cellpadding="20" cellspacing="0" <td bgcolor="lime">
<table border="1" cellspacing="0" cellpadding="20">



Get the code for table 6 below

<td valign="top"> normal <td valign="bottom">
<table border="1" height="180">



Get the code for table 7 below

* <td colspan="2"> *
* * * *



Get the code for table 8 below

<td colspan="4">
width="50" width="100" width="150" width="200"



Get the code for table 9 below

<td rowspan="2"> * * *
* * *



Get the code for table 10 below

<td colspan="2" bgcolor="blue">
<td rowspan="4" bgcolor="red"> 1 2 3
4 5 6
7 8 9
10 11 12
<table border="4" bordercolor="green">



Get the code for table 11 below

1

You can nest further tables within here once you get the hang of it!

7


8
9 10 11
12
13
14
links...

Ackadia



2

NESTED TABLES

Used properly you can create really good web pages without the need for frames and some of the problems they can bring...

[ BACK ] fails

[ PRINT ] fails, prints the wrong frame or may give unexpected results

[ LINK's ] fail

3computer user 4
5 6




Get the code for table 12 below

<table> with tiled background


Image tiled within a table








Get the code for table 13 below

<table cell> with tiled background


Image tiled within a cell

Note: Does not work for rows - <tr>


Note also:
"[5] The "background" attribute for the "td" and "th" elements is not an official HTML or XHTML attribute and is only supported by Internet Explorer 3.0+ and Netscape 4.0+. Other browsers may not support this attribute. For instance, Netscape 3.0 does not support this attribute."

Using them in CSS is fine, however...