Html Tables
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML TABLES</title>
</head>
<body>
<h1>TABLE 1</h1>
<table border="4" width="35%">
<thead>
<!-- 1st Row Spanned-->
<tr>
<th colspan="4">Purchased Equipment (June,2006)</th>
</tr>
<!-- 2nd Row Spanned -->
<tr>
<th rowspan="2">Item #</th>
<th rowspan="2">Item Picture</th>
<th>Item Description</th>
<th>Price</th>
</tr>
<!-- 3rd Row Spanned -->
<tr>
<th>Shipping Handling Installation,etc.</th>
<th>Expense</th>
</tr>
</thead>
<tbody>
<!-- 4th Row Spanned -->
<tr>
<td rowspan="2">1</td>
<td rowspan="2"> <img src="computer.jpg" alt="CPU" width="100px"> </td>
<td>IBM Clone Computer</td>
<td>$400</td>
</tr>
<!-- 5th Row Spanned -->
<tr>
<td>Shipping Handling Installation,etc.</td>
<td>$20</td>
</tr>
<!-- 6th Row Spanned -->
<tr>
<td rowspan="2">2</td>
<td rowspan="2"> <img src="ram.jpg" alt="RAM" width="100px"> </td>
<td>1GB RAM Module for Computer</td>
<td>$50</td>
</tr>
<!-- 7th Row Spanned -->
<tr>
<td>Shipping Handling Installation,etc.</td>
<td>$14</td>
</tr>
</tbody>
<!-- 8th Row Spanned -->
<tfoot>
<tr>
<th colspan="4">Purchased Equipment(June,2006)</th>
</tr>
</tfoot>
</table>
<h1> TABLE 2</h1>
<table border="2" width="40%">
<tr>
<th scope="col">Title1</th>
<th scope="col" colspan="2">Title2</th>
<th scope="col" colspan="2">Title3</th>
</tr>
<tr>
<td>Tabular Data 4</td>
<td>Tabular Data 5</td>
<td>Tabular Data 6</td>
<td>Tabular Data 7</td>
<td>Tabular Data 8</td>
</tr>
<tr>
<td rowspan="3">Tabular Data 9</td>
<td colspan="2">Tabular Data 10</td>
<td colspan="2">Tabular Data 11</td>
</tr>
<tr>
<td colspan="2" rowspan="2">Tabular Data 12</td>
<td colspan="2">Tabular Data 13</td>
</tr>
<tr>
<td colspan="2">Tabular Data 14</td>
</tr>
</table>
</body>
</html>
Comments
Post a Comment