Combine cells in an HTML table

Question

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>

Answer 1

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.

Answer 2

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.