[IMAGE]

 Taulukkomalleja
Vasemmalla puolella on mallitaulukko ja oikealla puolella on HTML-koodi, jolla taulukko syntyy.
Sivulla näkyvä taulukko HTML-koodi
Perustaulukko
Solu1 Solu2 Solu3
Solu 4 Solu 5 Solu 6
Solu 7 Solu 8 Solu 9
<table border="1" width="300">
<tr>
<td>Solu1</td>
<td>Solu2 </td>
<td>Solu3</td>
</tr>
<tr>
<td>Solu 4</td>
<td>Solu 5</td>
<td>Solu 6</td>
</tr>
<tr>
<td>Solu 7</td>
<td>Solu 8</td>
<td>Solu 9</td>
</tr>
</table>

Solun korkeuden kasvattaminen useamman rivin korkuiseksi rowspan-attribuutilla

Solu1 Solu2 Solu3

 

 
Solu 4 Solu 5
Solu 7 Solu 8
<table border="1" width="300">
<tr>
<td>Solu1</td>
<td>Solu2 </td>
<td rowspan="3">Solu3</td>
</tr>
<tr>
<td>Solu 4</td>
<td>Solu 5</td>
</tr>
<tr>
<td>Solu 7</td>
<td>Solu 8</td>
</tr>
</table>

Solujen sisällön keskittäminen

Solu1 Solu2 Solu3
Solu4

 

 

 Solu5 Solu6
Solu7 Solu8 Solu9
<table border="1" width="300">
<tr>
<td>Solu1</td>
<td align="center">Solu2</td>
<td align="right">Solu3</td>
</tr>
<tr>
<td valign="top">Solu4<br><br><br></td>
<td valign="middle">Solu5</td>
<td valign="bottom">Solu6</td>
</tr>
<tr>
<td>Solu7</td>
<td>Solu8</td>
<td>Solu9</td>
</tr>
</table>

 

Taulukoita sisäkkäin

A B
C D
Solu2
Solu3 Solu4
<table border="1" width="300">
<tr>
<td>
  <table border="1" width="100%">
  <tr>
  <td>A</td>
  <td>B</td>
  </tr>
  <tr>
  <td>C</td>
  <td>D</td>
  </tr>
  </table>
</td>
<td>Solu2 </td>
</tr>
<tr>
<td>Solu3</td>
<td>Solu4</td>
</tr>
</table>

 

Solun leventäminen COLSPAN-attribuutilla
solu1 solu2 solu3
solu4
solu5 solu6 solu7
<table border="1" width="300">
<tr>
<td>solu1</td>
<td>solu2</td>
<td>solu3</td>
</tr>
<tr>
<td colspan="3">solu4</td>
</tr>
<tr>
<td>solu5</td>
<td>solu6</td>
<td>solu7</td>
</tr>
</table>

CELLPADDING
solu1 solu2 solu3
solu4 solu5 solu6
<table border="1" width="300" cellpadding="20">
<tr>
<td>solu1</td>
<td>solu2</td>
<td>solu3</td>
</tr>
<tr>
<td>solu4</td>
<td>solu5</td>
<td>solu6</td>
</tr>
</table>

CELLSPACING
solu1 solu2
solu3 solu4
<table border="1" width="400" cellspacing="20">
<tr>
<td>solu1</td>
<td>solu2</td>
</tr>
<tr>
<td>solu3</td>
<td>solu4</td>
</tr>
</table>

Border
solu1 solu2
solu3 solu4
<table border="15" width="300">
<tr>
<td>solu1</td>
<td>solu2</td>
</tr>
<tr>
<td>solu3</td>
<td>solu4</td>
</tr>
</table>