HTML Tables
Creating HTML Tables
Tables are collection of rows and columns. Simple Example as :
<html>
<head>
<title>HTML tables</title>
</head>
<body>
<table>
<tr>
<td>Device</td>
<td>Use</td>
</tr>
<tr>
<td>Mouse</td>
<td>To Point</td>
</tr>
<tr>
<td>Keyboard</td>
<td>To Type</td>
</tr>
</table>
</body>
</html>
Table with Border
To Enable border with table we can use border parameter as :
<html>
<head>
<title>HTML tables</title>
</head>
<body>
<table border="1">
<tr>
<td>Device</td>
<td>Use</td>
</tr>
<tr>
<td>Mouse</td>
<td>To Point</td>
</tr>
<tr>
<td>Keyboard</td>
<td>To Type</td>
</tr>
</table>
</body>
</html>
Headings in a Table
Table headings are defined with the <th> tag.
<html>
<head>
<title>HTML tables</title>
</head>
<body>
<table border="1">
<tr>
<th>Heading</th>
<th>Another Heading</th>
</tr>
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table>
<h4> </h4>
</body>
</html>
Table with a Caption
<html>
<head>
<title>HTML tables</title>
</head>
<body>
<table border="1">
<caption>Table caption</caption>
<tr>
<th>Heading</th>
<th>Another Heading</th>
</tr>
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table>
<h4> </h4>
</body>
</html>
Cells Spanning Multiple Columns
there are situations where we need to define table cells that span more than one row or one column, for this we use colspan=”2″ (colspan “number of columns to span”). Example :
<html>
<head>
<title>HTML tables</title>
</head>
<body>
<table border="1">
<tr>
<th>First Name:</th>
<td>Jose</td>
</tr>
<tr>
<th rowspan="2">Telephone:</th>
<td>012 345 678</td>
</tr>
<tr>
<td>210 543 876</td>
</tr>
</table>
</body>
</html>
Cell Padding
This example demonstrates how to use cell padding to create more white space between the cell content and its borders
<html>
<head>
<title>HTML tables</title>
</head>
<body>
<table border="1" cellpadding="10">
<tr>
<th>First Name:</th>
<td>Jose</td>
</tr>
<tr>
<th rowspan="2">Telephone:</th>
<td>012 345 678</td>
</tr>
<tr>
<td>210 543 876</td>
</tr>
</table>
</body>
</html>
Cell Spacing
This example demonstrates how to use cell spacing to increase the distance between the cells.
<html>
<head>
<title>HTML tables</title>
</head>
<body>
<table border="1" cellspacing="10">
<tr>
<th>First Name:</th>
<td>Jose</td>
</tr>
<tr>
<th rowspan="2">Telephone:</th>
<td>012 345 678</td>
</tr>
<tr>
<td>210 543 876</td>
</tr>
</table>
</body>
</html>
Cell Background Colors and Images
The following example demonstrates how to add a background to one or more table cells.
<html>
<head>
<title>HTML tables</title>
</head>
<body>
<table border="1" cellspacing="10">
<tr>
<th>First Name:</th>
<td bgcolor="brown">Jose</td>
</tr>
<tr>
<th rowspan="2">Telephone:</th>
<td background="abc.jpg">012 345 678</td>
</tr>
<tr>
<td>210 543 876</td>
</tr>
</table>
</body>
</html>
