I’ll talk you through how to produce what I call a “Wikipedia style” table, the only table (really) worth producing; an elegant table with a fine border. I would not get involved with tables that have thick borders. When I see these I think novice etc.
You don’t need to know html table codes. It is useful to know what to look for but to write a table in html is pretty well pointless, in my opinion, as the html editors create great code for tables and the editors are free downloads. The following is an example of the code for a simple elegant table. The end result is shown below the code. Note: I am using simple html not CSS to produce sophisticated tables.
| <table |
Produces this:
| This | That |
| One | Two |
This can take on any number of variations (the table inside the box):
|
|
Or this:
|
The code for the latter (the inner table portion) is:
<table
style="background-color: rgb(255, 255, 255); width: 100px; text-align: left; margin-left: auto; margin-right: auto;"
border="0" cellpadding="2" cellspacing="1">
<tbody>
<tr>
<td
style="text-align: center; font-weight: bold; background-color: rgb(102, 51, 102); color: rgb(255, 255, 204);">This</td>
<td
style="text-align: center; font-weight: bold; background-color: rgb(102, 51, 102); color: rgb(255, 255, 204);">That</td>
</tr>
<tr>
<td
style="text-align: center; background-color: rgb(51, 102, 102); color: rgb(153, 255, 153);">One</td>
<td
style="text-align: center; background-color: rgb(51, 102, 102); color: rgb(153, 255, 153);">Twoc</td>
</tr>
</tbody>
</table>
The strength of these tables for me is that they are elegant, look professional and easy to produce. But ironically the border setting for them all is always “0”. They have no border. The border is produced inside the cell spacing, by setting a difference between the table colour and the cell colours.
OK, so how do we produce tables like this at will and in an endless range of combinations? As I mentioned you don’t do it manually. But you need to know how to get the elegant fine line border and how to fill in the table with colour.
As mentioned, the underlying method is to create a table and paint in the table with a desired colour. The colour will be the colour of the border (note: remember there is no border, as the border is the colour in the cell spacing). The table should be given Spacing of one pixel (enter “1” against “Spacing”). The cells inside the table are then painted in a different colour. This will be the colour of the cells. When the cells are painted in, what remains of the colour selected for the table is just the border, all the rest is the cell colour.
The key is to use an html editor to give flexibility and speed. There are many free editors. I use NVU. It is a free download. Once downloaded it can be installed in the usual way. Here is the home page for NVU
Once you have NVU installed (or any other html editor which should have the same facilities) you will usually write your webpage in it but if you simply want to write some html code to, for example, create elegant html table codes that is fine.
These are the steps employed in NVU to produce the above tables:
- Open a new page (click , “New”).
- Click, Insert>table>select the number of cells per chart.
- Double click on the table that is produced, which takes you to table properties.
- Select Table>Spacing>insert “1” (this means that in effect the “border” so produced will have a one pixel width, the finest possible border and the best in my opinion.
- Click Background Color and select the colour of the border. At this stage this will be selecting the table colour.
- Next there is a choice to colour in the cells. Either click “Cells” and go through each cell sequentially and select the appropriate colour or click OK, highlight the entire table and select the table or cell colour icon in the tool bar:
That is it. You will need some practice and experimentation obviously unless you know it all already! When the table is right for you go into the “Source” window and copy the page and paste it into the webpage that you are working on.
If you are working in the Blogger Blog compose mode window to write your post, the best way to transfer the table produced in NVU to your post is as follows (note: if you simply copy and paste the code the result is unacceptable):
- Save the table in NVU.
- Click on the browser icon.
- Copy the table by painting it in while in browser mode.
- Paste it into the compose mode window of Blogger.
Html table codes are all about working in a decent html editor and producing simple and elegant tables.
Why still use NVU when KompoZer is more up to date and better?
ReplyDeleteHi, thanks for the comment. I had never heard of KompoZer until you told me! I'll give it a try immediately and report back!
ReplyDeletePS. Another reason is that once you get settled with something you tend to stay with it as it lets you focus on page building rather than fiddling around learning new software.
ReplyDelete