Monday, 12 August 2013

Advanced Tables in website/Blog

Here is how to create a basic table, so you will understand the following info.
Now that you've learned that, wouldn't it be nice to have a few handy table html tips?
Here they are:

First, we should already know that
<table style="text-align: left; width: 100%;" border="3"
cellpadding="2">
<tbody>
<tr ="">
<td style="vertical-align: top;">Html Table1<br>
</td>
<td style="vertical-align: top;">Html Table2<br>
</td>
</tr>
<tr>
<td style="vertical-align: top;">Html Table3<br>
</td>
<td style="vertical-align: top;">Html Table4<br>
</td>
</tr>
</tbody>
</table>
<br>
is the code for a table.
And the table will look like this:
Html Table1 Html Table2
Html Table3 Html Table4

I shall also stress that if any code does not work properly when you have cut and pasted it, try putting it into only one line.

Second, let's introduce captions:
<table style="text-align: left; width: 100%;" border="3"
cellpadding="2">
<CAPTION>The Caption</CAPTION>
<tbody>
<tr ="">
<td style="vertical-align: top;">Html Table1<br>
</td>
<td style="vertical-align: top;">Html Table2<br>
</td>
</tr>
<tr>
<td style="vertical-align: top;">Html Table3<br>
</td>
<td style="vertical-align: top;">Html Table4<br>
</td>
</tr>
</tbody>
</table>
<br>
See the change? It causes this:
The Caption
The Caption
Html Table1 Html Table2
Html Table3 Html Table4

(Remember that you can use these tricks in between the <caption> and </caption> to spice up the caption text) 

No comments:

Post a Comment

Related Posts Plugin for WordPress, Blogger...