Login | Register   
LinkedIn
Google+
Twitter
RSS Feed
Download our iPhone app
TODAY'S HEADLINES  |   ARTICLE ARCHIVE  |   FORUMS  |   TIP BANK
Browse DevX
Sign up for e-mail newsletters from DevX


advertisement
 

HTML Advanced: Tables : Page 5

Step-by-step guides for creating tables and some ideas for ways to use them in your pages.


advertisement
Adding Text Formatting

<td>
<tr>
<i>Italic Text here</i>
</tr>
</td>

You can include almost every HTML formatting tag you use elsewhere in a page within a table. For example, to make the names of the fish italic, just add the bold text tags. In this example, the bold tags are noted in color so that you can see them more easily.



<table border=1>
<tr>
<td><b>Guppy</b></td>
<td>Snail</td>
<td>Duckweed</td>
</tr>

<tr>
<td><i>Swordtail</i></td>
<td>Crayfish</td>
<td>Waterlily</td>
</tr>
</table>

Aligning Text in a Table

<td align=left/right/center valign=top/bottom/middle>

You can align text in different ways within a cell. The align attribute lets you align the cell contents horizontally. The valign attribute lets you align the cell contents vertically.

You can use the align and valign attributes with the table header (th), the table data (td), and the table row (tr) tags. If you use these attributes with the table header or table data tags, the alignment is in effect only for that cell. If you use these switches with the table row tag, the alignment is in effect for all the cells in that row.

This table shows the different alignment options:

tag what it does how it looks
<td align=left>
 

align to the left side of the cell

Mercury
<td align=center>
 

align to the center of the cell

Venus
<td align=right>
 

align to the right side of the cell

Earth
<td align=center valign=bottom>
 

vertically align to the bottom of the cell

Mars
<td align=center valign=middle>
 

vertically align to the middle of the cell

Jupiter
<td align=center valign=top>
 

vertically align to the top of the cell

Saturn

Aligning text within a cell helps you create neater, easier to read tables.

<table border=1>
<tr>
<th colspan=2>Water Creatures</th>
</tr>
<tr>
<td colspan=2 align=center>FRESHWATER</td>
</tr>
<tr>
<th>Fish</th>
<th>Invertebrates</th>
</tr>
<tr>
<td>Guppy</td>
<td>Snail</td>
</tr>
<tr>
<td>Swordtail</td>
<td>Crayfish</td>
</tr>
<tr>
<td colspan=2 align=center>SALTWATER</td>
</tr>
<tr>
<td>Clown fish</td>
<td>Anemone</td>
</tr>
<tr>
<td>Trigger fish</td>
<td>Starfish</td>
</tr>
</table>

Adding Images

<img scr="URL">

It's easy to use an image within a table. Simply type the image tag instead of text within a table data cell.

<table border=1 cellpadding=5>

<tr>
<th colspan=2>Fish</th>
</tr>

<tr>
<td>Guppy</td>
<td><img src="../images/guppy1.gif" width=70 height=50></td>
</tr>

<tr>
<td>Clownfish</td>
<td><img src="../images/clown.gif" width=70 height=50></td>
</tr>

<tr>
<td>Swordtail</td>
<td><img src="../images/molly.gif" width=70 height=50></td>
</tr>

</table>



Comment and Contribute

 

 

 

 

 


(Maximum characters: 1200). You have 1200 characters left.

 

 

Sitemap
Thanks for your registration, follow us on our social networks to keep up-to-date