HTML Table Colspan

HTML Tutorial

HTML Forms

HTML Graphics

HTML Media

HTML API

HTML Table Colspan & Rowspan

HTML Table – Colspan

The colspan attribute is used to make a cell span over multiple columns:

Example

				
					<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
  border-collapse: collapse;
}
</style>
</head>
<body>

<h2>Cell that spans two columns</h2>
<p>To make a cell span more than one column, use the colspan attribute.</p>

<table style="width:100%">
  <tr>
    <th colspan="2">Name</th>
    <th>Age</th>
  </tr>
  <tr>
    <td>Jill</td>
    <td>Smith</td>
    <td>43</td>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td>
    <td>57</td>
  </tr>
</table>
</body>
</html>

Output:

Cell that spans two columns

To make a cell span more than one column, use the colspan attribute.
Name Age
Jill Smith 43
Eve Jackson 57

HTML Table – Rowspan

The rowspan attribute is used to make a cell span over multiple rows :

Example:

				
					<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
  border: 1px solid black;
  border-collapse: collapse;
}
</style>
</head>
<body>

<h2>Cell that spans two rows</h2>
<p>To make a cell span more than one row, use the rowspan attribute.</p>
<table style="width:100%">
  <tr>
    <th>Name</th>
    <td>Jill</td>
  </tr>
  <tr>
    <th rowspan="2">Phone</th>
    <td>555-1234</td>
  </tr>
  <tr>
    <td>555-8745</td>
  </tr>
</table>
</body>
</html>

Output:

Cell that spans two rows

To make a cell span more than one row, use the rowspan attribute.

Name Jill
Phone 555-1234
555-8745