How to Combine Cells Vertically in an HTML Table: Rowspan
In HTML, the cells of a tables are delimited by <td> and </td> tags, with the cell's contents between. Without extra attributes or CSS styles within the <td> tag, the default table structure makes each cell span exactly one row.
If you need to make a cell span across several rows, you must add the rowspan=" " attribute within the <td> tag of the cell you wish to elongate vertically. In each row beneath the row where the elongated cell starts, you must delete one cell so that your table is aligned properly. For example, when you make a cell span across three rows, you must delete a cell in the following two rows.
Let's take the simple example of a table with four cells distributed into two rows and two columns. The HTML code is:
To make the cell on the left span over both rows, add the rowspan="2" attribute to the first cell of the top row, and then delete one of the cells in the bottom row. The HTML code now looks like:
You can combine horizontal and vertical cell merging with in the same table as shown in the image on the left. One cell can even span multiple rows and columns, as shown in the image on the right. The HTML code for each table is show below the figure.
<table> <tr> <td rowspan="3">span 3 rows</td> <td colspan="3">span 3 columns</td> </tr> <tr> <td>H</td> <td>T</td> <td rowspan="2">span 2 rows</td> </tr> <tr> <td>M</td> <td>L</td> </tr> <tr> <td colspan="4">span 4 columns</td> </tr> </table> <table> <tr> <td rowspan="2" colspan="2">span 2 rows and 2 columns</td> <td>T</td> </tr> <tr> <td>A</td> </tr> <tr> <td>E</td> <td>L</td> <td>B</td> </tr> </table>
Uses for Vertically Merged Cells
Merging cells into a single vertical column is useful if you want to create a label for a group of rows adjacent to that column. It can also help you segregate groups of rows by type. When you are presenting data on a website in a tabular format, the more you organize the data into subgroups, the easier it is for people to analyze and process the data. People are visual creatures and spatial partitions help us scan things more efficiently. You can also color code the columns to make it easier to visually separate groups of data
Related HTML Tutorials and Tools
- How to Combine Cells Horizontally in an HTML Table: Colspan
How to combine cells vertically in an HTML table using the colspan=" " method.
- CSV to HTML Table Converter
Online conversion too that converts CSV files (comma separated values) to HTML tables. Simply copy and paste the contents of a CSV file into the converter tool and it will output the HTML code for a table. This is great for exporting data from a spreadsheet.
More by this Author
What readers think when you disable right-click (Image via Pixabay Public Domain) Disabling right-clicking functionality on your website as a whole, or just on specific pages, is as easy as inserting a few short lines...
Embedding a calculator on your website or blog is a great way to keep visitors on your pages longer. Rather than going off-site to make a computation, your visitors can make quick calculations right on your website,...
Actress Lindsay Lohan The classic English name Lindsay (pronounced LIN-zee) is one of many girl names that started out as a name for boys and has its origins in English surnames. Today it's rare to find men under the...
No comments yet.