Lissa Explains it All -- Table Tutorial


What are the table tags and definitions?
How do I make a basic table?
How do I add a border to my tables?
How do I add color to my tables?
How do I get rid of my border?
How do I set widths for my table?
How do I add a background to my table?
How do I nest tables?



Tables are used to put tabular data on a Web site. Tabular data is like a chart which you put a small amount of organized information in. Back when I first started this site, tables were the only way to layout a site. Today, site layout is better accomplished with CSS. You can find out more about laying out a site with css here.


What are the table tags and definitions?



I have a little HTML editor that can help you see how any kind of table is formatted into HTML code. The editor is only for those who use the Internet Explorer browser. It shouldn't take the place of you learning how to make your own tables, but it's a fun tool that can help you see how tables work.

up


How do I make a basic table?   Here are some examples of simple tables. Different browsers don't show tables the same way, even if you use the same codes.

Cell 1 Cell 2
<table border="1">
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
</tr>
</table>


Cell 1 Cell 2
Cell 3 Cell 4
<table border="1">
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
</tr>
<tr>
<td>Cell 3</td>
<td>Cell 4</td>
</tr>
</table>


up


How do I add a border to my tables?

Cell 1 Cell 2
Cell 3 Cell 4
<table border="8">
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
</tr>
<tr>
<td>Cell 3</td>
<td>Cell 4</td>
</tr>
</table>


up


How do I add color to my tables?

Cell 1 Cell 2
Cell 3 Cell 4
<table border="8">
<tr>
<td bgcolor="#00CCFF">Cell 1</td>
<td bgcolor="#CC00FF">Cell 2</td>
</tr>
<tr>
<td bgcolor="#00FF00">Cell 3</td>
<td bgcolor="#FFFF00">Cell 4</td>
</tr>
</table>


up


How do I get rid of my border?   Just add the tag border="0" to your table tag:

Cell 1 Cell 2
Cell 3 Cell 4
<table border="0" cellspacing="0">
<tr>
<td bgcolor="#00CCFF">Cell 1</td>
<td bgcolor="#CC00FF">Cell 2</td>
</tr>
<tr>
<td bgcolor="#00FF00">Cell 3</td>
<td bgcolor="#FFFF00">Cell 4</td>
</tr>
</table>


row 1 spacerrowsspacer
1-3
row 1
row 1
row 2 spacerrowsspacer
2-3
row 2
row 3 row 3
<table border="0" cellspacing="0">
<tr>
<td bgcolor="#00CCFF">row 1</td>
<td bgcolor="#FFFF00" rowspan=3>rows 1-3</td>
<td bgcolor="#CC00FF">row 1</td>
<td bgcolor="#00FF00">row 1</td>
</tr>
<tr>
<td bgcolor="#00FF00">row 2</TD><td bgcolor="#00FF00" rowspan=2>rows 2-3</td>
<td bgcolor="#00CCFF">row 2</td>
</tr>
<tr>
<td bgcolor="#ff33cc">row 3</td>
<td bgcolor="#ff33cc">row 3</td>
</tr>
</table>


Lissa Explains it All
cell 1 cell 2 cell 3 cell 4
cell 5 cell 6 cell 7 cell 8
<table border="0" cellspacing="0" cellpadding="5">
<tr>
<td bgcolor="#FFFF00" colspan=4>Lissa Explains it All</td>
</tr>
<tr>
<td bgcolor="#00CCFF">cell 1</td>
<td bgcolor="#CC00FF">cell 2</td>
<td bgcolor="#ff33cc">cell 3</td>
<td bgcolor="#00FF00">cell 4</td>
</tr>
<tr>
<td bgcolor="#ff33cc">cell 5</td>
<td bgcolor="#00FF00">cell 6</td>
<td bgcolor="#00CCFF">cell 7</td>
<td bgcolor="#CC00FF">cell 8</td>
</tr>
</table>


How do I set widths for my table?   Just add the width tag with specific widths to your table tag. You can also specify percentages in the tag, for instance <width=30%>. Just make sure the widths and percentages add up to 100%.

Cell 1 Cell 2
<table border="0" cellpadding="5" cellspacing="10" width="200">
<tr>
<td bgcolor="#00FF00" width="50" >Cell 1</td>
<td bgcolor="#FFFF00" width="150" >Cell 2</td>
</tr>
</table>


up


How do I add a background to my table?   It's very simple to add a background to a table. In the table tag (it's the first tag in your table) add style="background-image:url(yourfilename.gif)" like this:

<table style="background-image:url(yourfilename.gif)">

A background will fill your whole table.

Cell 1 Cell 2
Cell 3 Cell 4


Just need a background in one or more cells of your table? Add the background to the individual cell like this:

<td style="background-image:url(yourfilename.gif)">

Cell 1 Cell 2
Cell 3 Cell 4




up


How do I nest tables?   Nesting tables is simple. You can add any table inside of your existing table as long as it begins and ends in a <td> tag:

<table>
<tr>
<td>
      <table>
      <tr>
      <td>
            <table>
            <tr>
            <td>
            </td>
            </tr>
            </table>
      </td>
      </tr>
      </table>
</td>
</tr>
</table>



up





| About Lissa | Privacy Statement | Contact | Link Us |

Copyright 1997-2011 Lissa, All rights reserved
This Web site is registered with the Library of Congress Copyright Office.


lissaexplains.com


Lissa Explains it All -- HTML Help for KidsHTML Help, css, frames, tables, div layersCustom CursorsHTML Help ForumFree E-mail Service for Kids (and adults who love bright colors ;)Lissa Explains it All -- Free PostcardsLissa Explains it All -- MerchandiseLissa Explains it All -- Guestbook
HTML BasicsHTML TutorialCSS TutorialFrames TutorialTables TutorialColor TutorialFree JavascriptsFun Free Stuff for your siteMySpace TutorialHTML Tutorial
spacer