All About Tables


Tables have rows and columns. tr is a row and td is a column. You can have as many columns as you want on a row but the whole table will have that many columns. 

<table>
<tr>
<td>
Row 1 Column 1
</td>
<td>
Row 1 Column 2
</td>
</tr>
</table>
<table>
<tr>
<td>
Row 2 Column 1
</td>
<td>
Row 2 Column 2
</td>
</tr>
</table>
Row 1 Column 1 Row 1 Column 2
Row 2 Column 1 Row 2 Column 2
We can also set table width, table height, border thickness, border color, cellpadding and cellspacing. Cellspacing sets the number of pixels between each cell. Cellpadding will set how much distance data is from the cell's border. 

<table width = 300 height = 60 border = 3
 bordercolor = pink cellpadding = 5 cellspacing = 6>
<tr>
<td>
Row 1 Column 1
</td>
<td>
Row 1 Column 2
</td>
</tr>
</table>
<table>
<tr>
<td>
Row 2 Column 1
</td>
<td>
Row 2 Column 2
</td>
</tr>
</table>
Row 1 Column 1 Row 1 Column 2
Row 2 Column 1 Row 2 Column 2
We can also set the width of the columns. Here we set the width of the first column to 200 (whole table is 300) 

<table width = 300>
<tr>
<td width = 300>
Row 1 Column 1
</td>
<td>
Row 1 Column 2
</td>
</tr>
</table>
<table>
<tr>
<td>
Row 2 Column 1
</td>
<td>
Row 2 Column 2
</td>
</tr>
</table>
Row 1 Column 1 Row 1 Column 2
Row 2 Column 1 Row 2 Column 2
We can make one column extend through 2 or
more columns with the colspan command. 

<table border = 1>
     <tr>
         <td colspan=2>
        <center>Cell 1 </td>
    </tr>
    <tr>
        <td>Cell 3 </td>
          <td>Cell 4</td>
    </tr>
</table>
Cell 1
Cell 3 Cell 4
We can make one column extend through 2 or
more columns with the colspan command.

We can make a row extend through 2 or more
rows with the rowspan command. 
<table border = 1>
     <tr>
          <td rowspan=2><center>Cell 1</td>
          <td> Cell 2</td>
    </tr>
    <tr>
         <td>Cell 4</td>
     </tr>
</table>
Cell 1
 Cell 2
Cell 4

You can use Style commands by putting them in the Table tag. In addition to center you can also text-align right, left or justify

<table border = 1  style = "text-align : center;
font-size :20pt; line-height : 50pt">
<tr>
<td>
Row 1 Column 1
</td>
<td>
Row 1 Column 2
</td>
</tr>
</table>
<table>
<tr>
<td>
Row 2 Column 1
</td>
<td>
Row 2 Column 2
</td>
</tr>
</table>
Row 1 Column 1 Row 1 Column 2
Row 2 Column 1 Row 2 Column 2
You can set a background color for a whole table
or for a particular row or column
<table bgcolor = red>
<tr bgcolor = blue>
<td>
Row 1 Column 1
</td>
<td>
Row 1 Column 2
</td>
</tr>
</table>
<table>
<tr>
<td bgcolor = green>
Row 2 Column 1
</td>
<td>
Row 2 Column 2
</td>
</tr>
<tr>
<td bg>
Row 3 Column 1
</td>
<td>
Row 3 Column 2
</td>
</tr>
</table>
Row 1 Column 1 Row 1 Column 2
Row 2 Column 1 Row 2 Column 2
Row 3 Column 1 Row 3 Column 2

You can set a border style for tables, lists, paragraphs etc. The options are dashed, solid, double, groove, ridge, inset, outset. You must use the border-color command with this. Border-style is only for outside.


<table  style = "border-style : dotted; 
border-color : red">
<tr>
<td>
Row 1 Column 1
</td>
<td>
Row 1 Column 2
</td>
</tr>
</table>
<table>
<tr>
<td>
Row 2 Column 1
</td>
<td>
Row 2 Column 2
</td>
</tr>
</table>
Row 1 Column 1 Row 1 Column 2
Row 2 Column 1 Row 2 Column 2

We can split a picture into two parts and then put the picture back together using a table. This works well when we integrate links within a picture. We have to be careful though or picture will look like this. We must set cellpadding to 0 and cellspacing to 0. We must also make sure we do not force a carrage return within the table. We must keep td and /td on same line. 


<table>
<tr>
<td>
<img src="top.jpg">
</td>
</tr>
<tr>
<td>
<img src ="bottom.jpg">
</td>
</tr>
</table>