Like in Excel sheet can I have
is this possible in html ?
Cells within HTML tables can span multiple rows and multiple columns. The cell default is one row and one column.
<tr>: The Table Row element. The <tr> HTML element defines a row of cells in a table. The row's cells can then be established using a mix of <td> (data cell) and <th> (header cell) elements.
Under Table Tools, on the Layout tab, in the Merge group, click Split Cells. Enter the number of columns or rows that you want to split the selected cells into.
The number of rows or columns spanned by a cell is set by the rowspan and colspan attributes for either the TH or TD elements.
On the realisation that you're unfamiliar with colspan
, I presumed you're also unfamiliar with rowspan
, so I thought I'd throw that in for free.
One important point to note, when using rowspan
: the following tr
elements must contain fewer td
elements, because of the cells using rowspan
in the previous row (or previous rows).
table {
border: 1px solid #000;
border-collapse: collapse;
}
th,
td {
border: 1px solid #000;
}
<table>
<thead>
<tr>
<th colspan="2">Column one and two</th>
<th>Column three</th>
</tr>
</thead>
<tbody>
<tr>
<td rowspan="2" colspan="2">A large cell</td>
<td>a smaller cell</td>
</tr>
<tr>
<!-- note that this row only has _one_ td, since the preceding row
takes up some of this row -->
<td>Another small cell</td>
</tr>
</tbody>
</table>
Colspan:
<table>
<tr>
<td> Row 1 Col 1</td>
<td> Row 1 Col 2</td>
</tr>
<tr>
<td colspan=2> Row 2 Long Col</td>
</tr>
</table>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With