Week Two, Day One - Intro to Tables

      Hang on to your hats, folks...
Tables.


      A lot of 'beginners' dislike tables. They can be a hassle to create and maintain, and no matter WHAT your skill level, they are horrid to troubleshoot by hand.
      However, they are stinking convenient.
      Practically all of IrgendAnders is built with and organized with a table. Pink Fuzzy Dice, maintained and operated by my good friend Siren-chan, uses tables. If you are reading HTML 3-A-Day through the main page, that is a table, too. Remember the green border around the hex code explaination on Week One, Day Three? If you want anything more to your page layout than a bunch of br, you will need to know tables.
      And you want to know what?


      In the beginning, they are really easy.
And if you code all your stuff by hand, you can keep them managable.


Let's begin.



Open up your index.html in Notepad. Create a large amount of white space in the body, and type this:
<table>
then hit enter a few times and close it.
Later we'll learn some attributes for the table, but for now, that's the base tag. Pretty simple.


One line down from that, type
<tr>
This stands for 'table row'. Tables are built in rows, not columns, even though the table can accept attributes about colums. (We'll get to this in a couple of days.)


One line below that, hit 'tab' and type:
<td>
This stands for 'table data', sometimes called a 'cell'. Note that you haven't closed the table row yet.


Type a sentence, anything. 'This is table data #1.' Now close the td, </td> , and hit enter a couple of times.


Repeat this: table data, type a sentence (different than your first one), and close.
Now, go down to right above your /table, and close your table row.


Thoroughly confuzzed? Look at this.

 

<table> 
<tr> 
	<td>  This is table data #1. </td>  
	<td>  This is table data #2 </td>  

</tr>  
</table>  



This is basically what your code should look like. It will give you this result:


This is table data #1. This is table data #2.



Yes, it just barely looks like you've really even done anything, just typed two sentences right next to each other. But....
highlight everything from 'tr' to '/tr', copy, and then paste it again, below the first row.


 

<table> 
<tr> 
	<td>  This is table data #1. </td>  
	<td>  This is table data #2. </td>  

</tr>  

<tr> 
	<td>  This is table data #3. </td>  
	<td>  This is table data #4. </td>  

</tr>  

</table>  



This will give you this result:

This is table data #1. This is table data #2.
This is table data #3. This is table data #4.



Still doesn't look like you've done much, but I promise, you have.


You can have more than two cells in a row. But the trickiest thing when it comes to tables is this: You must keep up with how many cells you have in a row, and make sure you have the same number of cells in all rows. If you wanted to put a third TD in the first TR, you could; just remember to put a third TD in the second row, too.


Experiment around with tables today, using only these three tags. Make rows, make cells, try and make a 4 by 4 table, a 3 by 4 table, anything. Try and break it. Try and do something wrong and see what it does. Then try and fix it. When all else fails, make sure your code is legible. Legible means readable. Keep your code CLEAN, because Clean Code is Happy Code, and Happy Code equals Happy Programmers.


Come back tomorrow, and there'll be three new tags for dealing with the table itself.
Week Two, Day Two: Beautifying Your Table.





This HTML Tutorial was created by Sanna for the edification of new HTML programmers. Please do not steal the text from this page and call it yours. Reproduction rights granted for educational purposes only! Be nice, y'all; you know right from wrong. August 10, 2002. Sanna@SannaSK.com
HTML 3-A-Day
Main Index
SannaSK.com
Hosted by CaravanMultimedia.com