Creating Web Pages: Learning Tables in HTML
Sample Tables: Print out both web page and source code (view document source) to see how the tables are created.


Every column or <td> will make a box you can use for data (text or images) or leave blank. You can have data or images "span" columns or rows using colspan or rowspan in the td tag. For example, in the first table below, the source code for the first row within the table:


<tr><td colspan="5"><b><center>Room 12</center></b></td></tr>


tells the text Room 12 to span over the 5 columns in the row, be bold, and center.


3 Rows , 5 Columns (td) in each row, Table header (td) with column span 5

Room 12
About Our Class Our Favorite Books Art Work
Medievel Colonial Environment




3 Rows (tr), 3 Columns (td) in each row, Border, bgcolor used in column box, Gif used in column box (td)

About Our Class
which is really great
Our Favorite Books
ArtWork
Colonial Environment




3 Rows (tr), 3 Columns (td) in each row, Border, Center Aligned, Gif in box, bgcolor for box, box width and height set

About Our Class
which is really great
Our Favorite Books
ArtWork Medievel
Environment




3 Rows, 3 boxes (td) in each row, width and height set for each box
Border around table, vertically aligned at top of box.

About Our Class which is really great Our Favorite Books
Artwork that
we created
Medievel
Colonial Environment


For more tips and tools for using Tables, I recommend Elizabeth Castro's book: HTML for the World Wide Web (A Visual Quickstart Guide) which you can purchase through Amazon.com


Main Train Getting Started Tables and Graphics Frames Resource Information and Links

Last updated February 4, 2001
By Barbara Peskin
TWK Associates
twk@edstwk.com
Artwork in collaboration with eds designs
EDS Designs and TWK Associates sponsor
Pluto's Pages People and Pets Essay Contest