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 »
With this theme look: