Column 1 |
Column 2 |
Column 3 |
Column 4 |
Column 5 |
Super, man, I'm glad you made it!
I almost always begin my diaries inside a table construct. Sometimes, at least recently, I even set up inside two tables, just as I have done here, because I like the way it looks. To begin we set up a table with 5 columns in my inner table (the outer table just functions as a frame). This gives us an N row x 5 column grid defined to play with. You can see the column headers in color just above, but we don't have to give them colors or any content. They just need to be defined so we can work with them.
To create these column headers, we use the <th> html tag and modify the tag with the width= and the bgcolor= attributes. I might note that the width= attribute is not required, but you cannot insure the size of a cell if it is not specified.
|
<h2>Lesson 11 -- Advanced Tables<h2>
<table border="3" width="100%" bgcolor="#f6f3ec">
<tr>
<td>
<TABLE border="0" bgcolor="#ffffff">
<tr>
<th width="20%" bgcolor="#eedddd">Column 1</th>
<th width="20%" bgcolor="#ffeeff">Column 2</th>
<th width="20%" bgcolor="#ccffff">Column 3</th>
<th width="20%" bgcolor="#ffeeee">Column 4</th>
<th width="20%" bgcolor="#ddffdd">Column 5</th>
</tr>
<tr>
<td valign="top" align="justify" colspan="5">
Generally, I always begin my diaries inside a table construct.
...
</td>
</tr>
<tr>
<td colspan="3" rowspan="100" valign="top" bgcolor="#f6f3ec">
Here be dragons...
</td>
<td valign="top" colspan="2" align="justify">
On the left, I've shown the html code that I've used so far in
...
<br><br>
In it I've introduced some attributes that you may not have
...
</td>
</tr>
</table>
</td>
</tr>
</table>
|
On the left, I've shown the html code I've used so far in constructing this part of this diary. We start, of course, with the table tag:
<table border="3" width="100%" bgcolor="#f6f3ec"> .
This sets up the frame I mentioned. It spans one row and one column and uses the blockquote background color. Then (because I like it) I've set up another table inside the first one, without a border and with a white background.
Next I've created my grid consisting of 5 columns of equal width. Note that if an image is too large for the field (column) it is placed in, the system will modify the column width to make room for the picture.
<th width="20%" bgcolor="#eedddd">Column 1</th>
<th width="20%" bgcolor="#ffeeff">Column 2</th>
<th width="20%" bgcolor="#ccffff">Column 3</th>
<th width="20%" bgcolor="#ffeeee">Column 4</th>
<th width="20%" bgcolor="#ddffdd">Column 5</th>
The code section (on the left) spans 3 columns and the explanatory prose (this column) spans the last 2 of our 5 defined columns.
If you look carefully at the code on the left you will see the new attributes associated with the <td> tag — colspan, valign and align — which you may not have encountered as yet, and a new tag <th> (table head). I'm sure you remember the bgcolor and border attributes that belinda taught us about in Lesson 10.
|
Definitions |
<th>: The <th> tag defines a header cell in an HTML table. The difference between a <td> tag and the <th> tag is that the text in a header cell is, by default, bold and centered in the cell.
colspan: Specifies the number of columns a cell will span. In our example code the code cell spans 3 columns and the text, 2 columns.
align: Aligns the content of a cell. It can take 5 possible values: left, right, center, justify, and char.
valign: Vertically aligns the content of a cell. It can take 4 possible values: top, middle, bottom, and baseline. Baseline is used mostly when the cells of a row use different fonts. |
You may notice that I use the align="justify" attribute for most of my text. Justified text is, at least to my eyes, much easier to read and gives your text a professional look and feel. All current browsers render justify correctly (I have tested it against Opera, Firefox, Chrome, IE8, IE9, and the Windows version of Safari). IE6, however, does not. As nomandates and belinda have warned us before, keep in mind that each engine is unique and may render HTML differently. If you are doing something unusual, it may be worth checking it in more than one browser. |
I should also mention that there is a rowspan attribute that works the same as colspan, only over rows, and a few more table attributes, but for diaries written here on the Daily Kos the align, valign, and colspan attributes can make your diaries look professional and attractive.
I hope this helps all you budding diarists! For graduating from this super table tome, here is your superK. |
|
†Note: You should be able to copy & paste the code above into a comment or draft diary and see that it does indeed duplicate the diary so far. The formatting will be a bit off because of the indents and line breaks I've used to make the code more readable. Removing all the extra white space and carriage returns will give you (less most of the text) a comment that should look like this diary so far. |
|