8.1 Merging Cells Horizontally
Merging cells in a table lets you create more flexible and informative views of your data. This is particularly useful when you need to merge multiple cells to create headings or summary data. In HTML, the attributes colspan and rowspan are used for merging cells.
colspan Attribute
The colspan attribute merges cells horizontally. It specifies how many columns a single cell should span. For instance, if you have a cell with colspan="2", it'll take up the space of two regular cells in a row.
Example of Use:
Imagine you have a table with three columns, and you want the first cell in the row to span two columns. You would use colspan="2" to merge those two cells. This is useful for creating headings that span multiple columns or for merging data that pertains to several categories.
<table border="1">
<tr>
<th>Name</th>
<th>Age</th>
<th>City</th>
</tr>
<tr>
<td>Alice</td>
<td>25</td>
<td>London</td>
</tr>
<tr>
<td colspan="2">Total</td>
<td>2 records</td>
</tr>
</table>
8.2 Merging Cells Vertically
The rowspan attribute merges cells vertically. It specifies how many rows a single cell should span. For example, if you have a cell with rowspan="2", it'll take up the space of two regular cells in a column.
Example of Use:
Imagine you have a table with three rows, and you want the first cell in the column to span two rows. You would use rowspan="2" to merge those two cells. This is useful for creating tables where a single category of data pertains to multiple rows, such as merged headings or summary data.
<table border="1">
<tr>
<th>Name</th>
<th>Project</th>
<th>City</th>
</tr>
<tr>
<td rowspan="2">Alice</td>
<td>Project A</td>
<td>London</td>
</tr>
<tr>
<td>Project B</td>
<td>Batumi</td>
</tr>
</table>
8.3 Explanation of How It Works
How colspan and rowspan Work
Horizontal Merging (colspan): Imagine you're creating a schedule table where one course is held in multiple rooms. You can merge cells with colspan to indicate that one course covers two time slots.
Vertical Merging (rowspan): Imagine you're creating a competition results table where one participant takes part in multiple stages. You can merge cells with rowspan to indicate that one participant covers two stages.
Practical Examples
Creating Headings Across Multiple Columns: If you have a table with different categories of data and you want to create a heading that spans multiple columns, use colspan. For example, a heading "Employee Information" might span the columns "Name", "Age", and "Department".
Merging Data Vertically: If you have data that needs to be merged vertically, such as multiple entries for the same person or object, use rowspan. For example, if you have information about a project and one project spans multiple rows (e.g., project phases), merge rows with rowspan.
8.4 Examples
Imagine you have a table showing employees and their involvement in different projects:
- Employees: Ivan, Maria, Peter.
- Projects: Project A, Project B.
You want to merge cells to show that Ivan and Maria are working on two projects at the same time:
<table border="1">
<tr>
<th>Name</th>
<th>Project A</th>
<th>Project B</th>
<th>City</th>
</tr>
<tr>
<td>Ivan</td>
<td colspan="2">Yes</td>
<td>London</td>
</tr>
<tr>
<td>Maria</td>
<td colspan="2">Yes</td>
<td>London</td>
</tr>
<tr>
<td>Peter</td>
<td>Yes</td>
<th>No</th>
<td>Rome</td>
</tr>
</table>
Or, if you want to show that Ivan is working on two projects:
<table border="1">
<tr>
<th>Name</th>
<th>Project</th>
<th>City</th>
</tr>
<tr>
<td rowspan="2">Ivan</td>
<td>Project A</td>
<td>London</td>
</tr>
<tr>
<!-- empty -->
<td>Project B</td>
<td>London</td>
</tr>
<tr>
<td>Sergey</td>
<td>Project C</td>
<td>Rome</td>
</tr>
</table>
I specifically placed a comment where the cell is "eaten" by the neighboring expansion. It helps to understand where the rest will be displayed.
GO TO FULL VERSION