Web EndMemo

HTML Table


• Table Syntax
<table> 
<tbody> 
<th>  //table head
<tr>  //begin row
<td>  //begin cell
...
</td> //end cell
</tr> //end row
</tbody>
</table>

• Table Attributes
width: 250px  //table width
bgcolor: #cccccc  //background color
border: 2  //border width, 0 = noborder
align:   //left, right, center, table position in the page

An simple table example:
HTMLPHPJavascript
HTML Form Tag PHP Form Validation JS Form Submit

HTML Code of above table: 
<table border=2><tbody>
<tr><th>HTML</th><th>PHP</th><th>Javascript</th></tr>
<tr><td><a href="form.php">HTML Form Tag</a></td>
<td><a href="../php/formvalidation.php">PHP Form Validation</a></td>
<td><a href="../js/submitform.php">JS Form Submit</a></td>
</tr>
</tbody></table>


Here is the blood type estimate table of page Blood Type Calculator.
Father's Blood Type
A B AB O
Mother's
Blood
Type
A A/O A/B/AB/O A/B/AB A/O
B A/B/AB/O B/O A/B/AB B/O
AB A/B/AB A/B/AB A/B/AB A/B
O A/O B/O A/B O
The HTML Code is: 
<STYLE type=text/css>
TABLE .countrytable {
BORDER-RIGHT: #9FA4FF 1px solid; BORDER-TOP: #9FA4FF 1px solid; 
BACKGROUND: #fffff; MARGIN: 1em 1em 1em 0px; 
BORDER-LEFT: #9FA4FF 1px solid; 
BORDER-BOTTOM: #9FA4FF 1px solid; BORDER-COLLAPSE: collapse
}
.countrytable TD {
BORDER-RIGHT: #9FA4FF 1px solid; PADDING-RIGHT: 0.2em; 
BORDER-TOP: #9FA4FF 1px solid; PADDING-LEFT: 0.2em; PADDING-BOTTOM: 0.2em; 
BORDER-LEFT: #9FA4FF 1px solid; PADDING-TOP: 0.2em; 
BORDER-BOTTOM: #9FA4FF 1px solid
}
.countrytable TH {
BORDER-RIGHT: #aaa 1px solid; PADDING-RIGHT: 0.2em; 
BORDER-TOP: #aaa 1px solid; 
PADDING-LEFT: 0.2em; PADDING-BOTTOM: 0.2em; BORDER-LEFT: #aaa 1px solid; 
PADDING-TOP: 0.2em; BORDER-BOTTOM: #aaa 1px solid
}
</STYLE>
<table class="countrytable">
<tbody>
	<tr bgColor=#dddddd>
		<td colspan=2 rowspan=2 bgColor=#ffffff></td>
		<td colspan=4 align=center>Father's Blood Type</td>
	</tr>
	<tr bgColor=#dddddd>
		<td width=50><b>A</b></td>
		<td width=50><b>B</b></td>
		<td width=50><b>AB</b></td>
		<td width=50><b>O</b></td>
	</tr>
	<tr>
		<td align=center width=100 rowspan=5 bgColor=#dddddd>
		Mother's<br>Blood<br>Type</td>
	</tr>
	<tr>
		<td width=50 bgColor=#dddddd><b>A</b></td>
		<td width=50>A/O</td>
		<td width=50>A/B/AB/O</td>
		<td width=50>A/B/AB</td>
		<td width=50>A/O</td>
	</tr>
	<tr>
		<td width=50 bgColor=#dddddd><b>B</b></td>
		<td width=50>A/B/AB/O</td>
		<td width=50>B/O</td>
		<td width=50>A/B/AB</td>
		<td width=50>B/O</td>
	</tr>
	<tr>
		<td width=50 bgColor=#dddddd><b>AB</b></td>
		<td width=50>A/B/AB</td>
		<td width=50>A/B/AB</td>
		<td width=50>A/B/AB</td>
		<td width=50>A/B</td>
	</tr>
	<tr>
		<td width=50 bgColor=#dddddd><b>O</b></td>
		<td width=50>A/O</td>
		<td width=50>B/O</td>
		<td width=50>A/B</td>
		<td width=50>O</td>
	</tr>
</tbody>
</table>