HTML Tutorial - HTML Table Span








colspan - Span Columns

To span cell to multiple columns, you use the colspan attribute.

The values assigned to the colspan must be integers.

You also have to remove the cell elements that the expanded cell will cover.

<!DOCTYPE HTML>
<html>
<head>
</head><!--from   w  ww . ja va  2  s. c  o m-->
<body>
  <table border='1'>
    <thead>
      <tr>
        <th>Rank</th>
        <th>Name</th>
        <th>Color</th>
        <th colspan="2">Size & Votes</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <th>2nd Favorite:</th>
        <td>HTML</td>
        <td>HTML</td>
        <td>Oracle</td>
        <td>MySQL</td>
      </tr>
      <tr>
        <th>3rd Favorite:</th>
        <td>XML</td>
        <td colspan="2" rowspan="2">This is a test.</td>
        <td>203</td>
      </tr>
      <tr>
        <td>A</td>
        <td>B</td>
        <td>C</td>
      </tr>
    </tbody>
    <tfoot>
      <tr>
        <th colspan="5">&copy; 2011 java2s.com Enterprises</th>
      </tr>
    </tfoot>
  </table>
</body>
</html>

Click to view the demo





rowspan - Span Rows

To span cell to multiple rows, you can use the rowspan attribute. The value you assign to this attribute is the number of rows to span.

The values assigned to the rowspan must be integers.

If you want one cell in the middle column to span all three rows, you apply the rowspan attribute to cell 2.

You also have to remove the cell elements that the expanded cell will cover.

The following code expands a Cell to Cover Multiple Rows.

<!DOCTYPE HTML>
<html>
<head>
<style>
td {<!--from w  w  w .  java2  s .c o m-->
  border: thin solid black;
  padding: 5px;
  font-size: x-large
}
</style>
</head>
<body>
  <table border='1'>
    <tr>
      <td>1</td>
      <td rowspan="3">2</td>
      <td>3</td>
    </tr>
    <tr>
      <td>4</td>
      <td>6</td>
    </tr>
    <tr>
      <td>7</td>
      <td>9</td>
    </tr>
  </table>
</body>
</html>

Click to view the demo