Tutorials: Tables

Here's a table that's more common for layouts, and uses percentages. If I were to set this table at 100%, it would cover this entire page. Tables that use percentages fit almost any screen resolution. Take note of that if you're using images. If this will throw off your layout that uses images, set the width to pixels. To do this, just don't add the % sign.

You start your tables out with the table tag, a border (if you want one), and the width and height of your table. I'm not going to be adding the height, but you can. Just add height=" " and add your number between the parentheses.

<table width="50%" border="1">

Now you want to add a row to your table.

<tr>

With in this row you'll add a column and add a colspan of 2 to accomodate the next rows two columns.

<td colspan="2" width="100%">

Then add some content and close the column.

</td>

Now close the row.

</tr>

Start another row and column, this time making two columns.

<tr>

<td width="50%">Column one</td>

<td width="50%">Column two</td>

</tr>

Now close the table.

</table>

Here's how the it should look when you're finished.

Some Content
Column one Column two

And here's the finished code:

<table width="50%" border="1">
<tr>
<td colspan="2" width="100%">Some Content</td>
</tr>
<tr>
<td width="50%">Column one</td>
<td width="50%">Column two</td>
</tr>
</table>

Simple? If you want more help with tables go to my links section to visit other sites with much more detailed tutorials.

 • Main/Updates
 • Domain
 • Current Layout
 • Past Layouts
 • Contact
 • Links
 • Credits
 • Terms of Usage
 • Layout Guide
 • Layouts
 • Avatars
 • Abstract Art
 • Tutorials
 • PNG's
Kamui [Tsubasa Reservoir Chronicle] Subaru [X] Yuuko [XXXHOLiC]
2003 - 2012 Amber-Nights.net