HTML Basix - HTML tutorials and online webmaster tools


Htaccess code generators Code generators Tutorials

Online and offline code generators


Subscribe to RSS feed
Subscribe to the HTML Basix RSS feed.
Borders  width  cellpadding  background images  rowspan 
alignment  height  cellspacing  background colour  colspan 


Table Attributes


continued...

Width

height can be set in pixels or percentage.
  • if the table is set to a percentage, it will be a percentage of the page ie <table width=30%> will be 30% of the width of the page.
  • if the data cell is set to a percentage, it will be a percentage of the table. If no table width has been set, then the table will end up twice the width of the contents of the data cell.
<table border="2" bordercolor="#008080" width="400">
<tr>
<td>
setting the width of the table to 400 px
</td>
</tr>
</table>
setting the width of the table to 400 px

<table border="2" bordercolor="#008080" width="400">
<tr>
<td width="200">
setting the width of the table to 400 px and the data cell to 200 px.
</td>
</tr>
</table>
setting the width of the table to 400 px and the data cell to 200 px. Note that the data doesn't span across the whole width of the table.



Height

height can be set in pixels or percentage.
  • if the table is set to a percentage, it will be a percentage of the page ie <table width=30%> will be 30% of the height of the page.
  • if the data cell is set to a percentage, it will be a percentage of the table. If no table height has been set, then the table will end up twice the height of the contents of the data cell.

<table border="2" bordercolor="#008080" height="200">
<tr>
<td>
setting the height of the table to 200 px
</td>
</tr>
</table>
setting the height of the
table to 200 px

<table border="2" bordercolor="#008080">
<tr>
<td height="200">
setting the height of the data cell to 200 px forces the size of the table to 200 px if it's not set.
</td>
</tr>
</table>
setting the height of the
data cell to 200 px forces the size of the table to 200 px if it's not set.


Alignment

align=valign=
  • left
  • center
  • right
  • top
  • middle
  • bottom

<table align="left">aligns the contents of the table (the data cells) to the left. Use the same format for the 'center' and 'right' attributes.
<tr align="left">aligns the contents of each of the data cells in the row to the left. Use the same format for the 'center' and 'right' attributes. This saves having to set each data cell in the row.
<td align="left">aligns the contents of the data cell to the left. Use the same format for the 'center' and 'right' attributes.
<table valign="top">vertically aligns the contents of the table (the data cells) to the top. Use the same format for the 'middle' and 'bottom' attributes.
<tr align="top">aligns the contents of each of the data cells in the row to the top. Use the same format for the 'middle' and 'bottom' attributes. This saves having to set each data cell in the row.
<td valign="top">vertically aligns the contents of the data cell to the top. Use the same format for the 'middle' and 'bottom' attributes.
<table align="center" valign="bottom">aligns the contents of the table cell to the bottom center.
<tr align="center" valign="bottom">aligns the contents of each of the data cells in the row to the bottom center. This saves having to set each data cell in the row.
<td align="center" valign="bottom">aligns the contents of the data cell to the bottom center.




Site Stats     
VisitorsPageviews
Total: 9,452,519 Total: 27,513,650
Today: 378 Today: 1,169
Yesterday: 585 Yesterday: 2,109
Past Month: 18,135 Past Month: 65,379

543 visitors in the last 24 hours
This page has been visited 37,659 times
There are currently 10 visitors online
click to see where
most people online at once:
286 visitors on 06/27/2012
   You beaut











This site is © HTML Basix 2003 - 2009