'Combine cells in an HTML table

I have a table with three rows and three columns. How can I combine the last row columns? My HTML content:

<table>
  <tr><td></td><td></td><td></td></tr>
  <tr><td></td><td></td><td></td></tr>
  <tr><td>Here I need a cell by all width</td></tr>
</table>
htmlcsshtml-table


Solution 1:[1]

Use the colspan attribute:

<tr><td colspan="3">Here I need a cell by all width</td></tr>

The colspan attribute defines the number of columns a cell should span.

There is a related attribute rowspan that achieves the same for rows.

Solution 2:[2]

For this exact purpose the colspan attribute was created.

<table>
  <tr><td></td><td></td><td></td></tr>
  <tr><td></td><td></td><td></td></tr>
  <tr><td colspan="3">Here I need a cell by all width</td></tr>
</table>

Similarly you can use use the rowspan attribute if you want to span multiple rows.

<table>
  <tr><td></td><td></td><td rowspan="3">Spans full table height</td></tr>
  <tr><td></td><td></td></tr>
  <tr><td></td><td></td></tr>
</table>

To learn more about these two attributes visit the official documentation on w3.org.

Also I urge you not to use tables unless you need to present tabular data.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Oded
Solution 2

Related Questions