Home Advertise with us Forum Articles Sitemap Contact
Logo  

Html Getting Started Guide
Bullet Get Started
Bullet Elements
Bullet Attributes
Bullet Headings
Bullet Paragraphs
Bullet Formatting
Bullet Styles
Bullet Images
Bullet Tables
Bullet Lists
Bullet Forms
Bullet Colors
 

Advanced HTML
Bullet Layout
Bullet Frames
Bullet Fonts
Bullet Head
Bullet Meta
Bullet URLs
Bullet Scripts
Bullet Image Maps
Bullet Entities
Bullet Marquee
Bullet Tag Lists
Bullet Comment
Bullet Anchor
 

Page Layout with Tables

By Vince Barnes

While there's lots of discussion as to whether tables are the right tool for the job, there's no doubt that they can be very handy for laying things out on a web page. Here are some tips on how to use them for this purpose.

It's curious how things tend to clump together. Cars on a highway tend to group together with big gaps between the groups, stars gather together in the universe in big (very big!) galaxies with billions of miles between them and questions come in to the mentors in clusters with regard to their subjects! Recently there has been a cluster of questions involving tables. Not every question in this cluster mentioned tables, but they asked for help with problems that are easily or best solved by using tables. Here then, are some ideas for a few of the neat things tables that can do.

Tables are great for arranging things on your pages so that they go to particular places, relative to other things on the page. For example, you might want to have a small picture with text to the left of it and more text to the right. Such an arrangement is easy in a table.

A table has rows and columns. A table with three rows and three columns would look like a box with nine smaller rectangles in it. Each of these rectangle is called a cell. It's important to remember that programmers sometimes think of things a little differently than "normal" people. For example, most people would not think of a single box in terms of rows and columns, but to a programmer it could be a table with one row and one column. Nothin' wrong with that!

Let's make tables! Here's one with two rows and two columns :


<html>
<head>

<title>Table on Page</title>

</head>
<body>

<table border="1" cellpadding="0" cellspacing="0">

<tr>
<td width="50%">&nbsp;</td>
<td width="50%">&nbsp;</td>
</tr>

<tr>
<td width="50%">&nbsp;</td>
<td width="50%">&nbsp;</td>
</tr>

</table>

</body>
</html>


I have included the page code this time to show the table in context; the rest of the examples will show the table only. As you can see, this table begins with a <table> tage (with some extra attributes in this example) and ends with </table>. Inside the table there are two rows, each defined by <tr></tr> begin and end tags (table record begin, table record end - a row is also known as a record, just like in a spreadsheet or database program.) Each row has two columns defined with <td></td> table data begin and end tags. Personally, I would have liked <tc> for table cell, but I didn't get to vote! I have put a non-breaking space in each cell just to give it some width. Speaking of width, I specified border="1" as an attribute of this table so that if you look at it, you will be able to see it. If I didn't want to see the table borders on the page I would use:



Code Results
<table border="0" cellpadding="0" cellspacing="0"
style="border-collapse: collapse">

Here is the table with something in each cell:

<table border="1" cellpadding="0" cellspacing="0">
<tr>
<td width="50%">this is text</td>
<td width="50%">
<img border="0" src="logo.jpg"></td>
</tr>
<tr>
<td width="50%">
<img border="0" src="logo.jpg"></td>
<td width="50%">this is text</td>
</tr>
</table>
Here is the table with something in each cell:

this is text
this is text

I placed text to the left of the picture in the first row, and to the right of the picture in the second row. If you make a page with this code and don't have a small graphic file called logo.jpg in the same directory as the page, you will see the little red "x" placeholder instead of the picture, but you'll get the idea!

Cellpadding and cellspacing are great for putting some white space inside each cell or between the cells, respectively. Try values of 2 or 5 instead of 0 to see the effects (do cellpadding first, then cellspacing to see the difference.) This will be easiest to see if you make a graphic like a small solid red rectangle, call it logo.jpg and put it in the directory with this page.

It's important that each row has the same number of columns as every other row in the same table. Some browser are forgiving and will do their best to show the table even if the column counts differ, but some browsers will either not show the table or will quit showing any more of the page when they hit this error. We don't want that. Suppose, however, that you do want only one cell in the first row and two in the second. "Colspan" allows for this, like this:

<table border="1" cellpadding="0" cellspacing="0">
<tr>
<td width="100%" colspan="2">this is text</td>
</tr>
<tr>
<td width="50%">
<img border="0" src="logo.jpg"></td>
<td width="50%">this is text</td>
</tr>
</table>

<table border="1" cellpadding="0" cellspacing="0">

<tr>
<td width="100%" colspan="2">this is text</td>
</tr>

<tr>
<td width="50%">
<img border="0" src="logo.jpg"></td>
<td width="50%">this is text</td>
</tr>

</table>
You can also do "rowspan". For me, row spanning gets hard to keep track of, so I avoid it if I possibly can. Colspanning is hard enough to track even with well laid out code like in the examples. Usually, it is possible to achieve even the most complex of layouts using nested tables instead.

Nested tables are just like the ones next to your sofa! It's a table within a table, like this:

<table border="1" cellpadding="0" cellspacing="0">

<tr>
<td width="50%">this is text</td>
<td width="50%">

<table border="1" cellpadding="0" cellspacing="0">
<tr>
<td width="100%">&nbsp;</td>
</tr>

<tr>
<td width="100%">&nbsp;</td>
</tr>
</table>
</td>
</tr>

<tr>
<td width="50%">
<img border="0" src="logo.jpg"></td>
<td width="50%">this is text</td>
</tr>

</table>
Here I have made a table with two rows, one column, inside the right hand cell of the first row of my outer table. You might want to put this in your page and look at it to see what I mean.

On more thing to mention here is the width="50%" attribute you see. The width of a cell or of the table itself can be specified in terms of a percentage of the available browser window or in pixels, like this:


<table border="1" cellpadding="0" cellspacing="0" width="100%">

<table border="1" cellpadding="0" cellspacing="0" width="300">

<td width="125">this is text</td>

Using tables it is possible to get very creative with the layout and placement of everything on your page. Experiment a little with the suggestions I have given here and you will very quickly see the effects you can create with this powerful HTML tag set.
 
Articles List HTML Forms
 

CSS Tutorial

Bullet CSS
Bullet Syntax
Bullet Id & Class
Bullet Styling Backgrounds
Bullet Styling Text
Bullet Styling Fonts
Bullet Styling Links
Bullet Styling Lists
Bullet Styling Tables
Bullet CSS Box Model
Bullet CSS Border
Bullet CSS Cursors
Bullet CSS Margin
Bullet CSS Padding
Bullet CSS Display
Bullet CSS Positioning
Bullet CSS Floating
Bullet CSS Layers
 
© Copyright Reserved Htmltag.org. Privacy | Links