Table alighment samples |
|||||||||
|
These are html tags you type.
Within the style container in the head,
or within a separate style sheet file:
table.sample
{
width: 60%;
border: 8px green solid;
margin-left: auto;
margin-right: auto;
}
table.sample th, table.sample td
{
height: 70px;
border: 2px red solid;
}
Within the body:
<table class="sample">
<caption> Default alignment </caption>
<tr>
<th width="40%"> Heading 1 </th>
<th> Heading 2 </th>
</tr>
<tr>
<td> Datum 1 </td>
<td> Datum 2 </td>
</tr>
</table>
<table class="sample">
<caption> Various alignments </caption>
<tr>
<th width="40%" style="text-align: left; vertical-align: top;">
Heading 1
</th>
<th style="text-align: right; vertical-align: bottom;">
Heading 2
</th>
</tr>
<tr>
<td style="text-align: center; vertical-align: middle;">
Datum 1
</td>
<td> Datum 2 </td>
</tr>
</table>
NOTE:
|
This is the resulting web page content:
|
||||||||