Site Menu |
|
|
HTML Lessons |
|
|
Search The Web |
|
|
Financial Quotes |
Financial Quotes Charts and News
|
HTML Forum |

|
Imp's Guestbook |
|
|
 |
  |
Headline News
You'll find up to date news on subjects such as Late Breaking, World, International Sports, Entertainment, Music, Cricket, Formula 1 Racing, Golf, Soccer, Tennis, Track & Field, Hackers News, Lawsuits, War, Australia, France, Israel, Japan, South Africa and Great Britain.
|
|
 |
|
 |
 |
 |
 |
|
Taking A Further Look At Tables Examples...
|
|
So you need more tables examples huh? Well here they are, I hope you like them, all the coding is provided for each example for you to use if so desired.
Example 1
<table border="1"> <tr> <td colspan="3">1st</td> </tr> <tr> <td rowspan="2">2nd</td> <td>A</td> <td>B</td> </tr> <tr> <td>C</td> <td>D</td> </tr> </table>
Ok here's an explanation of what each of those above tags did in order to produce the above 6 cell table. Firstly, <table border="1">, this sets the table and the border around the 6 cell table, in order for you to see it, you may if you wish change this number from 1 to 0 or any other single digit number between 0 & 9, <tr>, this sets the table to have a Table Row, <td colspan="3">1st</td>, this opens a Table Data in the Table, stretching the cell across over 3 cells using colspan command, the </td>, this closes each Table Data in the Table, then we close that row with a </tr> and start a fresh row for the other cells using <tr>, now we have to use the rowspan command for Cell 2nd, because it stretches over 2 cells going down the Table like so, <td rowspan="2">2nd</td>, and then create Table datas for each of Cell A and Cell B as normal, for the last table row, we only require to create Cells C and Cells D, because we used rowspan="2" for Cell 2nd earlier, which took up the first Cell of Row 3, then close those off using </tr> and finally the </table> is used to close the whole Table, note once again we didn't have to use </table border>, that's because you only need the border command on the opening <table>.
Example 2 (8 Cell Table)
<table border="1"> <tr> <td colspan="4">1234</td> </tr> <tr> <td rowspan="3">ABC</td> <td colspan="3">567</td> </tr> <tr> <td>8</td> <td rowspan="2">DE</td> <td>9</td> </tr> <tr> <td>10</td> <td>11</td> </tr> </table>
Example 3 (12 Cell Table)
A B C D E | 123 | F | | 4567 | G H I | 89 | J | | 10 | 11 | K L | | 12 | 13 | <table border="1"> <tr> <td rowspan="5">ABCDE</td> <td colspan="3">123</td> <td>F</td> </tr> <tr> <td colspan="4">4567</td> </tr> <tr> <td rowspan="3">GHI</td> <td colspan="2">89</td> <td>J</td> </tr> <tr> <td>10</td> <td>11</td> <td rowspan="2">KL</td> </tr> <tr> <td>12</td> <td>13</td> </tr> </table>
Example 4 (A Table within a Table)
<table border="3" cellpadding="5"> <tr> <td> <table border="1"> <tr> <td rowspan="3">1st</td> <td>A</td> <td colspan="2">2nd</td> </tr> <tr> <td colspan="2">B</td> <td rowspan="2">D</td> </tr> <tr> <td>E</td> <td>F</td> </tr> </table> </td> </tr> </table>
Example 5 (Tables within a Table)
<table border="3" cellpadding="5"> <tr> <td> <table border="1"> <tr> <td colspan="3">1st</td> </tr> <tr> <td rowspan="2">2nd</td> <td>A</td> <td>B</td> </tr> <tr> <td>C</td> <td>D</td> </tr> </table> </td> <td>AA</td> <td>AAA</td> </tr> <tr> <td colspan="2">BB</td> <td>BBB</td> </tr> <tr> <td>CC</td> <td>CCC</td> <td> <table border="1"> <tr> <td colspan="3">1st</td> </tr> <tr> <td rowspan="2">2nd</td> <td>A</td> <td>B</td> </tr> <tr> <td>C</td> <td>D</td> </tr> </table> </td> </tr> </table>
|
|