Caught In a Cage

We now need to discuss tables.

Tables were originally designed to be store information, just like you would expect from a table. Up till now you were making pages where one element follows another, and the page just kept rolling. Ugly!

In the early days of web design this problem was solved with tables. Web designers started using tables as a layout tool.

By nesting tables (putting a table within a cell of another table), designers were able to create any layout imaginable. Unfortunately, this method had a serious drawback. Once the layout was completed and all content arranged on the page, reading the source file became very hard and sometimes impossible by anyone who wasn't a web designer.

You are lucky to be starting your journey now. We don't use tables to arrange elements on the page anymore. That task is handled by CSS, which we will start learning as soon as we're done with HTML.

We now use tables as was originally intended - for storing and displaying information in neat rows and columns. Using the box metaphore, let's take a look at how to make a table.

Tables consist of rows and columns. so we will set up a table accordingly. First we will tell the browser that we want a table using the <table> tag. Easy enough;

 

<table>

</table>
						

 

Next step will be to setup a row (we will make 2 rows for our example) using the <tr> tag.

 

<table>
   <tr>

   </tr>	
</table>
						

 

If you put this code into your web page, you probably won't see much of a table yet. That is because we are missing our columns. We use columns to display the actual information inside a table. Using the tag, let's finish setting up our table. We will have 3 columns per row (or 3 tags under each tag). For demonstration purposes we will also add the border attribute, so we can see the table even if there is no data in it. Like so:

 

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

 

 

That was easy, right? If it wasn't don't worry about it, as long as you understand the principles, with practice you will eventually be able to do this in your sleep.

Now what if you want to have a single column fill up a whole row, with other rows containing several columns. To accomplish that you should use the colspan attribute with a number of columns you need to span (3 in our case) applied to the appropriate <td> tag. Like so:

 

<table border="1">
   <tr>
      <td colspan="3">Ninja Gear-one dark size fits all</td>
   </tr>	
   <tr>
      <td>comfortable shoes</td>
      <td>dark clothes</td>
      <td>blades and darts</td>
   </tr>	
</table>
			

 

 

Notice how the first row has only 1 <td>, while the second has 3?

Same idea works for rows. You will need to use the rowspan attribute with the number of rows you want to span applied to the <td> tag:

 

<table border="1">
   <tr>
      <td rowspan="2">Ninja Targets</td>
      <td>rival ninja clans</td>
   </tr>	
   <tr>
      <td>hostile samurai lords</td>
   </tr>
   <tr>
      <td>ninjas stay in the shadows</td>
      <td>not because they are afraid of the sun,
         but because the sun is afraid of ninjas</td>
   </tr>
</table>
						

 

 

Notice that after we span 2 rows in the the first <td> of the first <tr>, we only need 1 <td> in the next row, instead of the original 2. A bit confusing? I know. Don't worry about it. You won't need to do colspan and rowspan too often, so just keep thinking about it, but don't stress as you follow these lessons.

I removed the <table> element out of context up till now on purpose. It's a bulky structure and I didn't want to distract you with other elements which are not a part of tables. But to reward your patience, here's how a table fits into a page and how other comon elements fit into a table:

 

<html>
   <head>
      <title>
         Caught In a Cage
      </title>		
   </head>	
	
   <body>
      <h1>Ninja History</h1>
      <img src="some_image.jpg" alt="this is a ninja image">
      <p>
         As a martial organization, ninja would have had many rules, and
         keeping secret the ninja's clan and the daimyo who gave them 
         their orders would have been one of the most important ones.
      </p>				

      <table border="1">
         <tr>
            <td rowspan="2"><h1>Ninja Targets</h1></td>
            <td><h2>rival ninja clans</h2></td>
         </tr>	
         <tr>
            <td><h2>hostile samurai lords</h2></td>
         </tr>
         <tr>
            <td><h2>ninjas stay in the shadows</h2></td>
            <td><p>not because they are afraid of the sun,
               but because the sun is afraid of ninjas</p></td>
         </tr>	
         <tr>
            <td><h2>Portrait of a <a href="http://en.wikipedia.org/
               wiki/Image:TMNTLeo2007.jpg" target="_blank">Ninja</a>
               </h2></td>
            <td><img src="some_image.jpg" alt="a typical ninja"></td>
         </tr>
      </table>
   </body>
</html>
						

 

 

Note that if you are calling an image that doesn't really exist ( some_image.jpg in my case), you won't be able to see an image - has to do with the whole "image doesn't exist" phenomenon. If the actual image exists but isn't located in the same folder as the html file, specifying the image name alone is not enough, you also need to specify the path to the image. It might look like this src="images/some_image.jpg". If the browser can't find the image, you should still see either a placeholder for the image or the actual text you specified in the alt attribute.

And if you're still having trouble - check your syntax by running the page through the validator (click here). The validator will more often than not tell you exactly what's wrong with your page.

 

That's tables in a nutshell. If you think this is hard, well it is. Have no fear. Keep practicing. Build a bunch of tables with various colspan and rowspan configurations and you will get it very soon.

 

Kata Practice: Now that you know how to build a basic table let's take some time to practice. Use the above markup for a new html file (call it whatever you want, but make sure to add .html at the end of the file name), and view it in the browser. Now take 3 small images and put them into the 3 cells (<td>) of the first two rows, and use some ninja-related text for the rest of the cells. Give it a try.

If you want something more challenging, make a table with 4 rows and 4 columns, where the images line up in the first column, while the rest of the cells hold text.

Next >>

 

Inside the Web Dojo

the HTML chamber