Cell PhonesComputersConsumer ElectronicsGraphic Design & Video EditingHome Theater & AudioIndustrial TechnologyInternet

How to Combine Cells Vertically in an HTML Table: Rowspan

Updated on January 04, 2017

Joined: 7 years agoFollowers: 206Articles: 36
The rowspan=" " attribute allows you to combine cells down multiple rows
The rowspan=" " attribute allows you to combine cells down multiple rows

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:

<table>
<tr><td>stuff</td><td>stuff</td></tr>
<tr><td>stuff</td><td>stuff</td></tr>
</table>


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:

<table>
<tr><td rowspan="2">stuff</td><td>stuff</td></tr>
<tr><td>stuff</td></tr>
</table>

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.

Combine the rowspan=" " and colspan=" " methods to create customized HTML tables with cells that span across multiple rows and columns
Combine the rowspan=" " and colspan=" " methods to create customized HTML tables with cells that span across multiple rows and columns

The Code

<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

Comments

    0 of 8192 characters used
    Post Comment

    No comments yet.

    Click to Rate This Article