 |
|
 |
|
 |
||||||||||||||||||
|
Tables Tables are not as complicated as most people will make them out to be, they are handy as they are all browser acceptable and they can when used right, make things look very good.So we'll start with basic tables, using no CSS coding. As we move into CSS, we'll start adding that to the mix. To make a table we must first open our code for one. <table> Then we'll close it. </table> So now our code in our document should appear like this <table> </table> So far we now have the outershell of the table, now we need to create some columns and rows. a <tr> is a row a <td> is a column Also remember to close the tags as well a </tr> closes the row a </td> closes the column So to start we always create a row, and close it. Our code should now look like this: <table> <tr> </tr> </table> We can of course create all the rows right away, so If our table is going to have three rows our code should now look like this: <table> <tr> </tr> <tr> </tr> <tr> </tr> </table> We now have three rows in our code. To this we need to add our columns. So if we want to have three columns we need to add the td tags to each row. Our code should now look like this: <table> <tr> <td> </td> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> <td> </td> </tr> </table> Note the spacing in the code, this is so that you can see what you're doing easier. It's a good idea to use proper spacing in the code. Now, since there are no height and width properties the outcome of your table would simpley be this: So we want to set the height and width of the table. We'll start by setting the main height and width. Inside our <table> tag we're now going to add height=100 width=100 when there is no % after the numbers it will assume you mean pixels. If you want a talbe to stretch the entire page set the width to 100%. You can use either precentages or pixels to set the height and width of the table. Our table will now look like this In the code: <table height=100 width=100> <tr> <td> </td> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> <td> </td> </tr> </table> And this on the page: So now we want to add in some text in some places so you can better view the table. When adding text, images and such you need to make sure you're always typing between the <td> and the </td> tags, that way the text will show up properly, and you won't confuse the table. So we'll add some words in, and our code will look like this: <table height=100 width=100> <tr> <td>Hey </td> <td>how </td> <td>is </td> </tr> <tr> <td>it </td> <td>going </td> <td>over </td> </tr> <tr> <td>there </td> <td>? </td> <td>? </td> </tr> </table> And this on the page:
They always say that a good coder will add the sizes to all their td's... which is true you always should add your sizes to your td's... so let's go back and add those in. With 100 pixels as the width of the table and the height we need to divide into porportions. So I'm going to set our first column to 30pixels, the second to 30pixels and the last to 40pixels Then I'm going to set the first row to 10pixels, the second to 55pixels and the last to 35pixels. To do this we need to modify each TD found in the TR's The first one in each TR would recieve the height and width property of width=30 height=10 The second would have a height and width of width=30 height=55 The last would have a height and width of width=50 height=35 The outcome in our code would be: <table height=100 width=100> <tr> <td width=20 height=10>Hey </td> <td width=30 height=55>how </td> <td width=50 height=35>is </td> </tr> <tr> <td width=20 height=10>it </td> <td width=30 height=55>going </td> <td width=50 height=35>over </td> </tr> <tr> <td width=20 height=10>there </td> <td width=30 height=55>? </td> <td width=50 height=35>? </td> </tr> </table> And this on the page:
Now let's play with the feel and look of our table.
For our purposes we're going to make it a 4px border. So our border should now be border=4 and the outcome is this:
Borders are usually set to the default of 1px and then you can change and add to them. Now what we want to work on next is the cellpadding and cell spacing. The cellpadding is the amount of space that goes outside and around the cell, the spacing is the amount of space found between each cell (A cell is the td area). So we'll start by increasing the cellspacing to 6 pixels Take your <table height=100 width=100 border=4> tag and add in cellspacing=6 Our table tag should now look like this: <table height=100 width=100 border=4 cellspacing=6> By doing this the outcome is:
Like with the border the cellspacing is automatically set to 1. Next we're going to alter the cellpadding. The cellpadding is the area around the cell, this is automatically set to 1 as well, now we're going to increase it to 6. Take our <table height=100 width=100 border=4 cellspacing=6> tag and add in cellpadding=6 Our table tag should now look like this: <table height=100 width=100 border=4 cellspacing=6 cellpadding=6> By doing this the outcome is:
Notice the spaces that now exist around the words. The next property in the table we're going to work on altering is the align property. The align property is how we center, right, or left justify text. It's left by default so you don't have to change it if you want it left, but let's say you want the cells with the ? marks to be centered, so first of all we need to know the code which is a simple align=center
Notice how the ? are now in the center of the square as opposed to being on the left of it. Our next part is the vertical alignment. If you notice the vertical alignment is automatically centered, we want to set it either to top, or bottom, we can also leave it as center.
You can now see the difference in the vertical alignment properties. |
