A data table with many cells next to each other can seem crammed. Some people don’t mind this kind of data presentation, while others would rather know how to merge cells in HTML.
By merging cells in a table, one can present many pieces of data in one large cell. This process often results in a large cell being displayed horizontally, vertically, or both over many rows or columns.
When the cells of a table span multiple rows, this is called “row-spanning.” When table cells span multiple columns, it is called “column-spanning” or a “colspan.”
This is mainly for presentation or reporting purposes to make a spreadsheet visually appealing. This article discusses how to merge cells in HTML and the WordPress working environment.
How to Merge Table Cells in HTML
The colspan attribute can fuse multiple table cells in a column in an <td> HTML tag (table data). When merging multiple row cells, one can use the rowspan attribute. Both of these attributes will be in the <td> tag.
The following examples show how to use these attributes in HTML and how they appear in the browser.
How to Use the Rowspan Attribute
This attribute determines how many rows a merged cell should span vertically. It can create a large vertical cell from two or more cells that occupy the same column, then display this in multiple rows.
For instance, the code <td rowspan=2 > merges two cells to create one large vertically positioned cell.
An HTML Table Code Example That Uses the Rowspan Attribute
The following code originates from a table with three columns and three rows. One can use the rowspan=”2″ attribute in the first <td> tag to create a single cell from the first two cells of the first column.
The number in the rowspan attribute determines the number of cells used for the <td> tag.
The following is an HTML table code example with a cell that stretches across two rows. To better understand how this code works, feel free to create a visual rendering in a browser.
<table> <tr> <td rowspan="2"> </td> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> <td> </td> </tr> </table>
Rendering this code in a browser will create a table with a large cell that spans the height of two rows. Changing the rowspan value to 3 will cause the first cell to span the height of all three rows.
When expanding a <td> row be sure to delete <td> tags from the other table rows (<tr>). When the first cell spans all three rows, there are only two <td> tags in the other two <tr> tags.
How to Use the Colspan Attribute
This attribute determines how many columns a merged cell will span horizontally. It creates a large horizontal cell from two or more cells that occupy the same row, then positions this across multiple columns.
Essentially, the colspan attribute defines the number of columns displayed across a large row. For instance, the HTML code <td colspan=2 > will merge two cells and create one large horizontal cell.
Two HTML Table Code Examples That Use the Colspan Attribute
The following code is an HTML table with a large cell that stretches across two columns. To better understand how this code works, feel free to create a visual rendering in a browser.
<table> <tr> <td colspan="2"> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> <td> </td> </tr> </table>
Rendering this code in a browser will create a table with a large cell that spans the width of two columns. Changing the colspan attribute value to 3 will cause the first cell to span the width of all three columns.
When all 3 columns are crossed, there should only be one <td> in the table row ( <tr> ). So, be sure to remove any remaining <td> tags when expanding a <td> column.
Here is another example of an HTML table with a cell that stretches across two columns. To better understand the code, create a visual rendering in your browser via your computer’s notepad.
<table> <tr> <th>Month</th> <th>Savings</th> </tr> <tr> <td>January</td> <td>$100</td> </tr> <tr> <td>February</td> <td>$80</td> </tr> <tr> <td colspan="2">Sum: $180</td> </tr> </table>
How to Use “0” (Zero) in the Rowspan and Colspan Attributes
When used in the colspan and rowspan in a modern browser, “0” represents the most columns or rows. For instance, one can use rowspan=”0″ to extend a row to the end of a table instead of tallying the rows of the table.
What are the best tables to use zero in? The number zero is especially suitable for dynamic tables. It is also ideal for large tables with frequently changing numbers of columns and rows.
How to Merge Table Cells in WordPress Using the wpDataTables Plugin
You can use HTML to make tables via the text box or install plugins that provide table options in your visual text field. These options work easily for simple tables but become difficult when working with larger tables.
The WordPress plugin wpDataTables is perfect for merging cells within larger tables. It is also great for creating, customizing, and editing these types of tables.
Merging cells is simple with wpDataTables. It can be done using the cell management mode by downloading the plugin and activating it. Even without experience with WordPress plugins, installing wpDataTables is easy for anyone.
Using the wpDataTables Plugin
When creating a table, select the first option on the list, then click “Next.” Create a name for your data table and choose the number of rows and columns you want. Click “Generate table” to display a new empty table.
You can select one of 17 date formats for the date columns and interactive date pickers.
The wpDataTables plugin also features integrated skins to customize the visuals of the table’s front end. These skins include:
- Dark
- Light
- Aqua
- Material
- Graphite
- Purple
Previews of how the table will look on tablets, desktops, and mobile interfaces will be displayed beneath the table. After each edit you make, click on “Save Changes” to see these changes reflected in the preview.
Ending Thoughts on Merging Cells in HTML and WordPress
The Simple WordPress tables by wpDataTables are great for merging, styling, and adding star ratings to cells. Merged cells in wpDataTables can show pedigree tables of generational histories for:
- Humans
- Dogs
- Racehorses, etc.
Please click here to see other examples of various uses of the merge cells feature in WordPress tables.
When it comes to merging cells, both HTML and WordPress can merge any number of columns and rows within a table. This results in great looking data tables, fit for your professional, social, or personal:
- Presentations
- Reports, and more
The WordPress wpDataTables plugin is the ideal choice for merging neighboring cells into one large cell. If you want a simple, easy-to-use solution for merging your table cells, wpDataTables is the one. You won’t regret it!
If you liked this article about how to merge cells in HTML, you should check out this article about the best fonts for tables.
There are also similar articles discussing how to make a table responsive, WooCommerce product tables, heatmap tables, and WordPress pricing table plugins.
And let’s not forget about articles on how to design a table, JavaScript data table, table UI design, and examples of data tables.
