Working with Knol Tables - Lesson 2

Advanced editing techniques

Advanced techniques for getting the most out of Table editing in Knol. These instructions should be followed in lesson order in order to get the most benefit out of your experience.

Authors

This article should be cited as:
"Working with Knol Tables - Lesson 2: Advanced editing techniques", by Will Johnson, wjhonson@aol.com at knol.google.com Creative Commons Attribution 3.0 License


<-- Back to Working with Knol Tables (Lesson 1)


In our first lesson, we learned how to add a row to the top of an existing table, and stick a title into it.  But we ended up with this:

Some countries near Poland    
 England  France  Germany
 Portugal  Russia  Spain

and wondered, "How do we get the title to display across the top of all three columns instead of sitting in just the first box?"

While in editing mode, look on your edit tools bar, to the far right you will see a button that says "HTML".  Click on that button and a new window will pop up, it may take a minute or two.  Once that window pops up, find your table in that window.  It will appear in text-only mode, not a graphical mode as you see it here.  The first part of it will look something like this:

<table style="border-color: rgb(136, 136, 136); border-width: 1px; border-collapse: collapse;" border="1" bordercolor="#888888" cellspacing="0">
<tbody>
<tr>
<td>Some countries near Poland</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
 </tr>

Do not be afraid!  The <tr> items mean "Table Row", while the <td> items mean "Table Data Cell".  Don't ask me why they gave it that name. Each <tr> must be ended with a </tr> and each <td> must be ended by a </td>.  These are pairs that define the boundary of each row, and of each cell within that row.  Now that you are totally confused, let's try a trick.

Remove the two trailing <td>&nbsp;</td> directives, and change the first td directive to this:
<td colspan=3>Some countries near Poland</td>

So your final result for the top few lines of your table will now look like this:
<table style="border-color: rgb(136, 136, 136); border-width: 1px; border-collapse: collapse;" border="1" bordercolor="#888888" cellspacing="0">
<tbody>
<tr>
<td colspan=3>Some countries near Poland</td>
 </tr>

Now click the Update button and you should see this:
Some countries near Poland
 England  France  Germany
 Portugal  Russia  Spain

Let's make the table a little wider.  Click anywhere on the table and you will see tiny squares appear on the boundaries of the table.  Now grab the edge of the table with your mouse and drag it to the right.  Your result might look something like this:

Some countries near Poland
 England  France  Germany
 Portugal  Russia  Spain

But now the heading, is left-justified and we'd rather have it centered.  So select the entire heading text.  Make sure you select just the text, and not the entire box it's within. If you do select too much, just click anywhere outside the box, and your selection area should reset to nothing.  Once you have just the heading text selected, on the Tools Edit Bar, select the Format menu.  A pop-down menu appears and at the bottom of the pop-down Menu you will see the selection "Align".  Chose that and you will see a new pop-down menu with the justification choices, including "Center".  Choose Center.  Your new result should look like this:

Some countries near Poland
 England  France  Germany
 Portugal  Russia  Spain

Each cell in your data is a separate data element.  You can right-, left-, or center-justify the text in any element without affecting the others.  You can also change the font style, and font size of any text without affecting the rest of the table.  You can add bolding, italics, underling or various colors to different table cell elements without affecting the rest of the table.  All of these choices are on your Tools Edit Bar, which appears when you are in editing mode.


Wjhonson's Knols - Total Pageviews - Independent Counter joomla stats