HTML Tables Example w/Source Code

Register / Login

HTML Tools

Color & Font Picker
HTML Table Maker
HTML Table Maker II
HTML Validator
Link Checker and Header Response Tool

HTML Forum

How do you put a PHP Function, on a HTML Page?

Losing background/text color when converting HTML to PDF

HTML Help Needed!!!!!! Please, no CSS or Javascript

old problems

how can i wrap the text in a cell of a html table

IE7 looks good, FFox Not so good

Rotate Flash video on refresh

Help!

Transparent Frameset Background.

Help with forms

Html Code

CSS Layout - 3 Column Plus

mailto auto subject population variable

Date script on an Image

table row values

Browser Based HTML Email Forms

form help

Help with form please

Put Picture Next to Youtube Video

Scrollbar under heading

View all HTML Discussions

Learn the best web site design techniques
Complete HTML tables tags list
Get help putting HTML tables on your web site

Previously I showed you an example of a basic HTML table. It incorporates just the basics of HTML tables, making rows, making cells, all that stuff. You could use this kind of HTML table to make columns, but not much more. To do much more with your HTML tables you have to start joining cells

Here I will show you how to join cells vertically and horizontally. Horizontally joined cells can be used as headers, and vertically joined cells can be used to spice things up for variety.

Here is a table with joined cells:

SAN ANTONIO SPURS
World Champs	Keys
World Champs	Tim Duncan David Robinson

Here is the source code with a step by step guide.

Example source code for HTML frames
<table border="2" bgcolor="#888888" width="70%" cellpadding="2" cellspacing="0">	Starts the table, the table will have a 2 pixel wide border, grey background, will be 70% of the available width. Cellpadding will be 2 pixels and cellspacing is set to 0
<tr>	Starts first row
<th colspan="2">	Starts a header cell, two cells are joined horizontally
SAN ANTONIO SPURS	Header cell content
</th>	Ends header cell
</tr>	Ends first row
<tr>	Starts second row
<th rowspan="2" width="50%">	Starts secondary header cell; this cell will be joined with the one below it, half the width of the table
World Champs	Header cell content
</th>	Ends header cell
<th>	Starts second cell of the second row
Keys	Cell content
</th>	Ends second cell of second row
</tr>	Ends second row
<tr>	Starts third row. This row will only have one cell, remember we told the first cell of the second row to extend down with the rowspan attribute
<td align="left" valign="middle">	Starts table cell
Tim Duncun<br>David Robinson	Content of third row cell, note the line break
</td>	Ends cell
</tr>	Ends third row
</table>	Ends table

Very simple, eh? It would be good for you to learn to make some basic tables and learn how to read the tags for tables before you try anything more complex. It is very simple to have the whole table messed up because of one little mistake and you can't find it... (I've had that happen) That happens especially when you're a beginner.

Tips For HTML Tables

Here are some tips for your adventures in the wild world of tables

I've said this before, but I can't say it enough, keep your source code neat or you might have some serious problems
Try using transparent tables to place text and images exactly where you want them.
Use tables to create columns on your web page
Use the columns to create a navigation bar down the left side
Make an ongoing design for your page with tables
Use tables without borders and with a background color in between little articles of text as separators
Be creative!

Back to the HTML tables menu.

HTML