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>&nbsp;</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>&nbsp;</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>