I would like to create a simple html table with sub-rows within a single row. It looks something like this;
The tricky part is to divide the 3rd column into 2 rows row 1
and Row 2
. How would the html code look like to implement such a table?
I would like to create a simple html table with sub-rows within a single row. It looks something like this;
The tricky part is to divide the 3rd column into 2 rows row 1
and Row 2
. How would the html code look like to implement such a table?
Using rowspan
<table border=1>
<tr><td rowspan=2>1</td><td rowspan=2>Main</td><td>Row 1</td></tr>
<tr><td>Row 2</td></tr>
</table>
Try this:
<html>
<head>
<style>
table {
border-collapse: collapse;
}
table, td, th {
border: 1px solid black;
}
</style>
</head>
<body>
<table>
<tr>
<th rowspan="3">col1</th>
<th rowspan="3">col2</th>
<th>col3</th>
<th>col4</th>
<th>col5</th>
</tr>
<tr>
<td>data1</td>
<td>data2</td>
<td>data3</td>
</tr>
<tr>
<td>data1</td>
<td>data2</td>
<td>data3</td>
</tr>
</table>
</body>
</html>
You can use two div's to simulate the two rows in the last column:
table {
border-collapse: collapse;
width: 50%;
height: 50%;
}
th, td {
border: 1px solid black;
}
td .test {
border-bottom: 1px solid black;
}
<table>
<tr id="row1">
<td>a
</td>
<td>b
</td>
<td>
<div class="test">Test</div>
<div>Test</div>
</td>
</tr>
</table>
Even nested tables might help:
<table>
<tr>
<td>Hi</td>
<td>
<table>
<tr>
<td>
How
</td>
</tr>
<tr>
<td>
When
</td>
</tr>
</table>
</td>
</tr>
</table>
table
for layout purposes here? This would be an absolute no-go.