Tables

Tables are really handy especially since most of the time tables are used in web making. So how did I make the table? Simple here is the code:
<table border=1>
<tr>
<td>YOUR 1ST TEXT HERE!
</td>
<td>YOUR 2ND TEXT HERE!
</td>
</tr>
<tr>
<td>YOUR 3RD TEXT HERE!
</td>
<td>YOUR 4TH TEXT HERE!
</td>
</tR>
</table>

The code for the above table is as follows:
<table border=1>
<tr>
<td colspan="2">HERE ARE MY FAVORITE NUMBERS!
</td>
</tr>
<tr>
<td>10
</td>
<td>13
</td>
</tr>
</table>

As you can see above all you have to do is to add the colspan="2" to the td attribute. You can place 3 or 4 or 5 depending on how many columns you would want for the td to span!

The code for the above table is as follows:
<table border=1>
<tr>
<td rowspan="2">put your text here!
</td>
<td> put your text here!
</td>
</tr>
<tr>
<td>put your text here!
</td>
</tr>
</table>

You can change the rowspan to whatever number of rows you want your td to span!

Other table attributes

1. border - if you want to place a border on your table just put any value from 1 to the border attribute. (eg. border=3)
2. width - if you want to define the width of your table or your td you can do so by adding the width="1.2.3..to whatever" (eg. td width=100 ; table width=250)
3. height - if you want to fix the height of the table you can put height="any number you want" (eg. td height="500" ; table height="850")
4. cellpadding - this is the padding in your cells. You can place this when you want the contents in your cells to be farther from the edges of the cell. (eg. table cellpadding=0; table cellpadding=5)
   illustrations on cellpadding
   when cellpadding=0 the table would look like this:
   

   when cellpadding=5 the table would look like this:
   

   

   Notice how the text moved farther away from the cells' edges when we added the cellpadding!

5. cellspacing - this is the space between your cells. (eg. table cellspacing=0 ; table cellspacing=5)

illustrations on cellspacing
when cellspacing=0 the table would look like this:


when cellspacing=5 the table would look like this:




Now you can see how the cells moved farther apart from each other!

6. th - you can use this to shorten your table code if you want to place a header on your table cells.
   illustration

   The code used above is as follows:
   <table border=1>
   <tr>
   <th>HEADING 1
   </th>
   <th>HEADING 2
   </th>
   </tr>
   <tr>
   <td>put your text here!
   </td>
   <td>put your text here!
   </td>
   </tr>
   </table>

   Notice that we did not have to put the codes <td> <b> <h1> HEADER 1 </h1> </b> </td> to get that header effect! We simply made use of the th atribute which is simpler and easier!

7. bgcolor - this will set your table background colors!
   illustration

   Put your text here!

   Put your text here!

   The code used above is as follows:
   <table bgcolor="#333D6F" cellpadding="10" cellspacing="10">
   <tr>
   <td bgcolor="#3394A8">Put your text here!
   </td>
   <td bgcolor="#3373A8">Put your text here!
   </td>
   </tr>
   </table>

   This makes a prettier looking table, doesn't it?

Share |