Lesson 10a Tables pt 2
opefully, from the preceding examples, you can see how the border size can make a difference. You can use your borders to make frames around images also, which we will take up later. Now let's move on to width and height. The width and height of your table can be equally important. This will define how large your table actually is. It is set according to a certain percentage of your page. Do you want your table to go all the way across the page? Set it at 100%. How about halfway? Set it at 50%. (You can also use pixels to set it.) If you don't set it, the table size will be defined by whatever you place inside it. It will take on the dimensions of the cell with the most information or largest image. On my first example, I will use a width of 50%. You write width and height like this: width=50% height=10%. These go inside the tags.
| The width is set at 50%. |
This next one has a width of 60%.
| The width is set at 60%. |
Here is the code:
This next one is set at 70%.
| The width is set at 70%. |
| This is using pixels set at 50 instead of percentage. |
You can set the width (and height) in the <TABLE> tag and also in the <TD> tag to accomodate your specific needs. From the above examples, I'm sure you can see that you can set the width and height of your table using percentage or pixels.
Next let's look at setting the width for each cell. Here are some examples:
| The width of this cell is 25% of the table. | The width of this cell is 75% of the table. |
Here is the source code so that you can see that the width is set inside the TD tags here:
As you can see, you define the TD width by a certain percentage that the cell will take up in the table. You can set each cell to take up a different proportion to best suit your own needs. One more example. We'll divide the table into four cells:
| The width of this cell is 10% of the table. | The width of this cell is 20% of the table. | The width of this cell is 30% of the table. | The width of this cell is 40% of the table. |
Here is the source code:
few more pointers: In the next table, I am going to change the width of one cell. Also in the Table Header, we are going to span the title across the top by typing COLSPAN=4 inside the tag, (column span) since we will now have 4 TD tags. See for yourself how this makes the heading span across the top of all 4 cells. Changing the width of one of the cells allows for more information to be placed in it. You can play around with this also to better define your own tables. You can make your heading go all the way across your table using column span.
| HTML BASIC: This spans the top. | |||
|---|---|---|---|
| 1997 1999 |
This cell is at 75%. 60% attended 95% attended |
1999 2000 |
75% attended 95% attended |
Now for the source code. Look it over and see if you can tell what has been changed from the first example:
<TABLE bgcolor="#dddddd" border=2 width=40%>
<TR>
<TH COLSPAN=4>HTML BASIC: This spans the top.</TH>
</TR>
<TR align="center">
<TD>1997<br>1999</TD>
<TD width=75%>
This cell is at 75%.
60% attended<br>95% attended </TD>
<TD>1999<br>2000</TD>
<TD>
75% attended<br>95% attended
</TD>
</TR>
</TABLE>
ow what about having a column on the left side of the table for information, just in case you need it? This next example has 3 rows. In your first TD tag write ROWSPAN=3 to make it span up and down all 3 rows, like so:
| This cell spans 3 rows | Row 1 Cell 1 |
Cell Two | Cell Three | Cell Four |
| Row 2 Cell 1 |
Cell Two | Cell Three | Cell Four | |
| Row 3 Cell 1 |
Cell Two | Cell Three | Cell Four |
This makes your cell span up and down along the number of rows you specify. You will notice in the source code below that I added tags to make the font white on the left side and the background color red or white depending on the area of the table. You can define the attributes inside each of these tags. More on that in the next segment.
|
<TABLE bgcolor="#ffffff" border=2 bordercolor="#000000" width=40%> <TR> <TD ROWSPAN=3 bgcolor="#ff0000"><font color="#ffffff">This cell spans 3 rows</font></TD> <TD>Row 1 Cell 1</TD> <TD> Cell Two </TD> <TD>Cell Three</TD> <TD> Cell Four </TD> </TR> <TR> <TD>Row 2 Cell 1</TD> <TD> Cell Two </TD> <TD>Cell Three</TD> <TD> Cell Four </TD> </TR> <TR> <TD>Row 3 Cell 1</TD> <TD> Cell Two </TD> <TD>Cell Three</TD> <TD> Cell Four </TD> </TR> </TABLE> |
hope this will leave you with a better understanding of tables.
Still on our agenda is background color, cellspacing and cellpadding. Then we will frame images with tables and learn about coloring borders. So on to part three of this long, long lesson!