Skip to main content

two penguins Welcome to our series on the basics of visually enhancing your diaries and comments! If you are joining us late, you can find links to the entire series at the top of the first diary in the series, New Diarists: Links & Blockquotes. We update that list as new diaries are added. ♥ Follow us above to see future installments in your stream.
Some days ago now, belinda ridgewood introduced us to the html <table> tag with her excellent diary New Diarists: Tables. The table tag is a very useful tool that can be used in a great many different creative ways.
For example one may want to generate two columns of text. One column might contain parenthetical or additional information about your topic, a sidebar if you will. Meanwhile, in the other cell, you can carry on the main theme of your diary.

Today we look at some of the advanced attributes available to the <table> html tag and how they can be used to enhance the visual appeal of your diaries. That is, you can use these table structures to give you control over your diary layout. I think of them as containers within which I can be more expressive.
You can also regulate the size of a blockquote by encapsulating it within a table. The blockquote will not exceed the width of the cell in which it is created.
You can move your blockquotes around,
 
or even roll your own. The background color for a blockquote is "#ddffdd".
               
               
          This is a randomly chosen cell    
               
               
   
Pink
         
               
               
If you think of your diary as a grid, you can place things pretty much wherever you want them to appear by taking advantage of the properties of html tables. I've created an 8 x 8 grid in the space just above, to show how a cell (and thus its row/column) will expand to allow for the size of the content.

Next, let me introduce you to the align, valign, and colspan attributes and the <th> html tag. Jump beyond the kryptonite cloud to the Fortress of Table-itude. Up, up, and away!

Lesson 11 -- Super Tables:


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.





In general, formatting "tricks" that can be done in a diary can also be done in a comment. Practicing your skills in comments (in this diary, for instance!) is an easy and low-stakes way to know what you're doing before you work on a diary. So while these lessons focus on how to do things in comments, know that the same tools will produce the same results in a diary.

Preview Is Our Friend!

Preview is a lifesaver in TWO important ways! First, it shows us how our comment or diary will look when posted. That may NOT be the way you thought it was going to look when you composed it! Always take advantage of the ability to look at the preview and make sure everything works and looks exactly the way you planned. If it doesn't look right in Preview, your comment or diary will not magically improve after being posted!

Second, when writing a diary, Preview is also the way to SAVE your diary draft. If you're working on a diary, clicking Save & Preview periodically is a very good idea. Otherwise, if the site goes down, or your browser tab gets closed by mistake, you are back to the drawing board!

Additional Resources for Diarists


This diary is part of a series by nomandates and belinda ridgewood on the basics of enhancing diaries and comments at Daily Kos. All of them can be found at the New Diarists group page. Click the New Diarists' ♥ to follow the group and get all the diaries in your stream. Diaries in the series so far are:

If you have questions about any aspect of posting comments or diaries, feel free to post a comment and ask. These threads are for sharing, so more experienced Kossacks are welcome to both ask and answer questions, and to share advice and war stories.

We INTEND this thread as a place to practice, not just today's skills but anything you're working on with regard to posting on Daily Kos. Do not be afraid to write a comment and see if you've understood. We try to keep an eye on older diaries, but obviously, if you'd like coaching, the best place to practice is in the most recent diary. If you need advice after a diary has gotten quiet and no one's seeing your comment to help you, you may certainly send a private message (Kosmail) to one or both of us. (We don't advise a message to the group, because those don't let anyone know they're there!)

More resources: New Diarists: Resources for All provides links to 1) resource diaries for drafting, formatting, and mechanics of the site; 2) advice diaries re writing, interacting with commenters, and working with groups; and 3) a list of helpful groups and series for New Diarists. And Cranky Users: Our Story So Far lists how-to diaries published during DK4's first year.

New Diarists is a safe place to practice diary writing skills with a mentor's guiding hand. Experienced diarists are invited to join and buddy up with new diarists, and new diarists are welcome to join and to ask for help. The group's Publication Manager provides a space where we can collaborate on diaries and help with everything from revising to formatting to promoting your new diary.

How-to and Help diaries, such as smileycreek's New Diarists: How to Collaborate with Us on a Diary, are published to the New Diarists group. Visit our home page and click on the little ♥ to follow us.

Ready to play? Send a private message to nomandates for an invitation to join the group.
                         
                         

Originally posted to New Diarists on Tue Sep 11, 2012 at 05:00 PM PDT.

Also republished by J Town and Cranky Users.

EMAIL TO A FRIEND X
Your Email has been sent.
You must add at least one tag to this diary before publishing it.

Add keywords that describe this diary. Separate multiple keywords with commas.
Tagging tips - Search For Tags - Browse For Tags

?

More Tagging tips:

A tag is a way to search for this diary. If someone is searching for "Barack Obama," is this a diary they'd be trying to find?

Use a person's full name, without any title. Senator Obama may become President Obama, and Michelle Obama might run for office.

If your diary covers an election or elected official, use election tags, which are generally the state abbreviation followed by the office. CA-01 is the first district House seat. CA-Sen covers both senate races. NY-GOV covers the New York governor's race.

Tags do not compound: that is, "education reform" is a completely different tag from "education". A tag like "reform" alone is probably not meaningful.

Consider if one or more of these tags fits your diary: Civil Rights, Community, Congress, Culture, Economy, Education, Elections, Energy, Environment, Health Care, International, Labor, Law, Media, Meta, National Security, Science, Transportation, or White House. If your diary is specific to a state, consider adding the state (California, Texas, etc). Keep in mind, though, that there are many wonderful and important diaries that don't fit in any of these tags. Don't worry if yours doesn't.

You can add a private note to this diary when hotlisting it:
Are you sure you want to remove this diary from your hotlist?
Are you sure you want to remove your recommendation? You can only recommend a diary once, so you will not be able to re-recommend it afterwards.
Rescue this diary, and add a note:
Are you sure you want to remove this diary from Rescue?
Choose where to republish this diary. The diary will be added to the queue for that group. Publish it from the queue to make it appear.

You must be a member of a group to use this feature.

Add a quick update to your diary without changing the diary itself:
Are you sure you want to remove this diary?
(The diary will be removed from the site and returned to your drafts for further editing.)
(The diary will be removed.)
Are you sure you want to save these changes to the published diary?

Comment Preferences

Subscribe or Donate to support Daily Kos.

Click here for the mobile view of the site