 This page provides examples of the html code that you might need to include to insert a table in a Web 2.0 site (used for example to layout adjoining images as shown in the image on the right), using the html-editing feature of your blog site.
Of course, this is only required if your blog or Web 2.0 site doesn't provide a table insertion feature, or you are unable to install a table creation plugin.
|
Shown below are some sample table layouts that may be useful in organising the layout of information on your blog page.
Choose the table layout that you would like to insert, then copy the html code from below that table configuration. Paste the code into the html area of your site's editing window. Replace the text Cell 1a, etc, with your content for that cell - text or pictures.
To enter the code below you will need to be in the html editing area of your blog. In WordPress, for example, click on the html tab in the page editing window:
Using the parameters outlined below, you can vary the width of your table, the border thickness, the cell width, etc, by modifying the relevant html as detailed below.....
| |
- Table width (table width="500")
- The example tables below are set to 500 pixels. Just change the number for a different width.
Table border (border="0")- The code below each table is written to display no borders (border=0). The actual examples shown below have their borders set to "1", for illustration purposes. To change the thickness of the borders, change this number.
Cell Width (td width="50%")- The width of each cell is set as a percentage of the width of the table. To vary this cell width, look for the code td width="50%", then simply change the percentage value to change the width of the cell.
Additional rows- Each row is defined by a <tr> tag to start the row, and a </tr> tag to complete the row, with <td> and </td> tags to define each cell across the row's columns.
For example (in a two column table) rows are created by:
<tr>
<td></td>
<td></td>
</tr>
A three column row would include an extra <td></td>
You can copy and paste the above part of the code for the relevant table to add additional rows to your table.
Alignment- The code below doesn't include any alignment information (left, right, centre). Use your blog's editing tools for text, picture and table alignment options.
|
Be aware though that once you have added additional html code to a blog page you may have to return to the html editing window to change some parts of your page - if the regular blog editing software doesn't "recognise" the html additions that you have made.
Of course, if you have some expertise in using other web editing software, you can create a layout using software such as DreamWeaver, then copy and paste the relevant html code to your blog. |
