HTML table merge cells

Contiguous cells in a table can be merged to accommodate more data. For example, in a table of four rows and four columns, all the cells in the first row can be merged and a nice header placed in that row. You can also combine multiple rows or columns.

To merge adjacent cells in a table row, use the colspan attribute, the value specifies the number of cells in the row that you want to merge.

To merge adjacent cells in a table column, use the rowspan attribute, the value specifies the number of cells in the column that you want to merge:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Page title</title>
  </head>
  <body>

    <h4>Combine two cells in a table row:</h4>
    <table border="1">
      <tr>
        <th>Name</th><th colspan="2">Phone</th>
      </tr>
      <tr>
        <td>Max Oneshot</td><td>123 45 67</td><td>234 56 78</td>
      </tr>
    </table>
	 
    <h4>Combine two cells in a table column:</h4>
    <table border="1">
      <tr>
        <th>Name</th><td>Max Oneshot</td>
      </tr>
      <tr>
        <th rowspan="2">Phone</th><td>123 45 67</td>
      </tr>
      <tr><td>234 56 78</td></tr>
    </table>

  </body>
</html>
Try it »
Copying materials from this site is possible only with the permission of the site administration and
when you specify a direct active link to the source.
2011-2018 © puzzleweb.ru

puzinfo@puzzleweb.ru | ruen