Spanning samples |
||||||||||
No spanning |
||||||||||
|
The style element in the head of this entire page contains these style rules for all tables with class="sample":
<style>
table.sample
{
border:5px inset gray;
}
table.sample td
{
border: black 1px solid;
}
</style>
These are html tags you type.
<table class="sample">
<caption> No spanning </caption>
<tr>
<td> A </td>
<td> B </td>
<td> C </td>
</tr>
<tr>
<td> D </td>
<td> E </td>
<td> F </td>
</tr>
<tr>
<td> G </td>
<td> H </td>
<td> I </td>
</tr>
</table>
|
This is the resulting web page content:
|
|||||||||
Row spanning |
||||||||||
|
These are html tags you type.
<table class="sample">
<caption> Row spanning </caption>
<tr>
<td rowspan="2"> A </td>
<td> B </td>
<td> C </td>
</tr>
<tr>
<td> E </td>
<td> F </td>
</tr>
<tr>
<td> G </td>
<td> H </td>
<td> I </td>
</tr>
</table>
|
This is the resulting web page content:
|
|||||||||
Column spanning |
||||||||||
|
These are html tags you type.
<table class="sample">
<caption> Column spanning </caption>
<tr>
<td colspan="2"> A </td>
<td> C </td>
</tr>
<tr>
<td> D </td>
<td> E </td>
<td> F </td>
</tr>
<tr>
<td> G </td>
<td> H </td>
<td> I </td>
</tr>
</table>
|
This is the resulting web page content:
|
|||||||||
Row and column spanning |
||||||||||
|
These are html tags you type.
<table class="sample">
<caption> Row and column spanning </caption>
<tr>
<td rowspan="2" colspan="2"> A </td>
<td> C </td>
</tr>
<tr>
<td> F </td>
</tr>
<tr>
<td> G </td>
<td> H </td>
<td> I </td>
</tr>
</table>
|
This is the resulting web page content:
|
|||||||||