Basic table layouts
Basic table layouts
This tutorial guides you through how tables work and the simplest coding behind them.
| 1. |
Table 1 is a simple table. It features 3 rows and 2 columns and has a 1px border. The cellspacing is the distance between each cell. The cellpadding is the distance the text or image is from the edge of the cell its in.
400px is rather small for a website but I am just showing you the basics of tables. When previewed the table looks like this: The colours have been added so that you can see the cells properly. This is just what the user see's. Behind the scenes we have the HTML code for it. <table width="400" border="1" cellspacing="3" cellpadding="1"> Note: This code doesn't have the colours on. You must start with a <table> tag. If you do not state a width the table will be the smallest size possible to fit the data in. You can set the width using either % or px. Depending on your site you can use either. % is a bit more like liquid in a way that it will fill out accordingly to the screen resolution of the users computer. If you use px you can get in problems with people using different screen resolutions. For example, if you create a site of 750px it will fit perfectly on someones screen who has a resolution of 800x600 and a full screen browser. But, if someone is using a resolution of 640x480 or 800x600 with a shrunken browser window they will not be able to see the whole site without scrolling horizontally. The normal table borders are generally not used much in professional sites. The borders are created using CSS styles, but more on that later.
These tables show the difference between certain table settings. I generally use this settings on my sites: Cell spacing: 0px I then define the border and padding using CSS code. |
| 2. |
Now we will adapt the above table to have a better layout for a website. We will have a header, navigation, content area and a footer. So we use the same settings again:
This gives us the same as before. Now with a bit of code editing we can change this: to this: This means we can stretch out header and footer across the whole page rather than having 2 seperate sections. In the code we can see the difference between the 2 pretty easily. The code for table the first table is this: <table width="400" border="1" cellspacing="3" cellpadding="1"> Then the code for our new table: <table width="400" border="1" cellspacing="3" cellpadding="1"> The main thing you will notice here is the colspan attribute in the <td> tag. This is short for column span, basically it tells the browser how many columns that that row needs to span across. If you do not define the colspan properly your table will not look how you want it. This is what you get if you do not place the colspan attribute in. In this example we want the red and green rows to spread all the way across the table. |
||||||||||||||||
| 3. |
To give a slightly more professional look to the table, i find removing the border the best thing to do. So using this settings, we can remove the border.
Or you can just change the border value to 0 rather than 1 on your original table. So: <table width="400" border="1" cellspacing="3" cellpadding="1"> changes to: <table width="400" border="0" cellspacing="3" cellpadding="1"> After taking the border off you can see more clearly the part that the cell spacin There is no border but there is still the gap between the cells which we can see with the background colour showing through. |
||||||
| 4. |
Now if continue on to use CSS you can use these settings:
This removes all the padding and cell spacing which leaves us an ideal table for apply our CSS code to. |
||||||
| 5. |
Now you can add your content and change your table as you want. Here are some examples of what you can do:
Neither of these are using CSS. They are using borders though to make it easier for you to see the layout. |
||||||||
| 6. |
Play around with your tables, one you are ready move on to applying CSS to your tables for formatting and layout. |
