This question already has answers here:
How do you use colspan and rowspan in HTML tables?
(11 answers)
Closed 5 years ago.
I need to make the table like below:
Here is my code, logically everything seems to be written correctly, but if you remove the extra cell, then everything breaks. in what there can be an error?
<table border=1>
<tr>
<td>One</td>
<td>Two</td>
<td>Three</td>
</tr>
<tr>
<td>Four</td>
<td>Five</td>
<td rowspan=2>Six</td>
</tr>
<tr>
<td rowspan=2>Seven</td>
<td rowspan=2>Eight</td>
<td>Extra</td>
</tr>
<tr>
<td>Nine</td>
</tr>
</table>
Here you are - i just added a second line of text to the higher/merged cells, but it (only) works without that "Extra" cell:
table {
border-collapse: collapse;
}
td {
border: 1px solid #444;
}
<table>
<tr>
<td>One</td>
<td>Two</td>
<td>Three</td>
</tr>
<tr>
<td>Four</td>
<td>Five</td>
<td rowspan=2>Six<br>X</td>
</tr>
<tr>
<td rowspan=2>Seven<br>X</td>
<td rowspan=2>Eight<br>X</td>
</tr>
<tr>
<td>Nine</td>
</tr>
</table>
Related
I am trying to create a table using HTML like this:
I wrote something like this:
<table>
<caption>Bill Summary</caption>
<tr>
<th rowspan="2">Months</th>
<th colspan="3">Bills</th>
<th rowspan="2">Total</th>
</tr>
<tr>
<td>Electricity</td>
<td>Water</td>
<td>Gas</td>
<td align="center">9925</td>
</tr>
<tr>
<td>January</td>
<td>1000</td>
<td>1000</td>
<td>975</td>
</tr>
<tr>
<td>February</td>
<td>1200</td>
<td>1200</td>
<td>975</td>
</tr>
<tr>
<td>March</td>
<td>1500</td>
<td>1100</td>
<td>975</td>
</tr>
</table>
But it gives out put like this:
I need to have that one total amount aligned in the center and a border like the first table image
Thanks in Advance.
I guess you could use the rowspan attribute here as well.
table, th, td {
border: 1px solid;
border-collapse: collapse;
}
<!DOCTYPE html>
<html>
<body>
<table>
<caption>Bill Summary</caption>
<tr>
<th rowspan="2">Months</th>
<th colspan="3">Bills</th>
<th rowspan="2">Total</th>
</tr>
<tr>
<th>Electricity</th>
<th>Water</th>
<th>Gas</th>
</tr>
<tr>
<td>January</td>
<td>1000</td>
<td>1000</td>
<td>975</td>
<td rowspan="3">9925</td>
</tr>
<tr>
<td>February</td>
<td>1200</td>
<td>1200</td>
<td>975</td>
</tr>
<tr>
<td>March</td>
<td>1500</td>
<td>1100</td>
<td>975</td>
</tr>
</table>
</body>
</html>
move total value to third row and modify like this
<td align="center" style="vertical-align: middle" rowspan="3" >9925</td>
I have the following table:
Comm Layer
Implemented By
Application
Application
Transport
OS
Internet
OS
Link
OS
Link
Hardware
<table>
<thead>
<tr>
<th>Comm Layer</th>
<th>Implemented By</th>
</tr>
</thead>
<tbody>
<tr>
<td>Application</td>
<td>Application</td>
</tr>
<tr>
<td>Transport</td>
<td>OS</td>
</tr>
<tr>
<td>Internet</td>
<td>OS</td>
</tr>
<tr>
<td>Link</td>
<td>OS</td>
</tr>
<tr>
<td>Link</td>
<td>Hardware</td>
</tr>
</tbody>
</table>
I would like to merge the two cells that say "Link" and the three cells that say "OS". I tried using the rowspan attribute in several ways but to no avail. I was able to merge either the two "Link" cells or the three "OS" cells, but not both.
In short: you cannot have a <tr> where all cells participate in a rowspan="" because that creates a zero-height row (as there's no row-specific content). I feel this is a design flaw in HTML.
One workaround is to have a zero-width column that always has non-rowspan="" cells (which are propped up with , but hidden (using visibility: hidden;, not display: none;):
(My posted code comments out the removed cells with <!--<td>OS</td>--> for illustrative purposes, obviously you can remove those in your final version)
table {
border: 1px solid #999;
border-collapse: collapse;
}
th, td {
border: 1px solid #999;
}
tr > *:nth-child(1) { visibility: hidden; }
<table>
<thead>
<tr>
<th> </th>
<th>Comm Layer</th>
<th>Jurisdiction</th>
</tr>
</thead>
<tbody>
<tr>
<td> </td>
<td>Application</td>
<td>Application</td>
</tr>
<tr>
<td> </td>
<td>Transport</td>
<td rowspan="3">OS</td>
</tr>
<tr>
<td> </td>
<td>Internet</td>
<!--<td>OS</td>-->
</tr>
<tr>
<td> </td>
<td rowspan="2">Link</td>
<!--<td>OS</td>-->
</tr>
<tr>
<td> </td>
<!--<td>Link</td>-->
<td>Hardware</td>
</tr>
</tbody>
</table>
There's probably improvements using more modern CSS techniques to enforce a minimum row height though - I've been using the technique since before I stopped using Dreamweaver in 2004.
<!-- Try this one -->
<table align="center" cellspacing="0" cellspadding=="0">
<thead>
<tr>
<th>Comm Layer</th>
<th>Jurisdiction</th>
</tr>
</thead>
<tbody>
<tr>
<td>Application</td>
<td>Application</td>
</tr>
<tr>
<td>Transport</td>
<td rowspan="2">OS</td>
</tr>
<tr>
<td>Internet</td>
</tr>
<tr>
<td rowspan="2">Link</td>
<td>OS</td>
</tr>
<tr>
<td>Hardware</td>
</tr>
</tbody>
</table>
I am trying to add a row with double height to that of other row. But unable to make. Not sure what is wrong.
<table border="1">
<tr>
<td rowSpan="2">A1</td>
<td rowSpan="2">A2</td>
<td rowSpan="2">A3</td>
<td rowSpan="2">A4</td>
</tr>
<tr>
</tr>
<tr>
<td>C1</td>
<td>C2</td>
<td>C3</td>
<td>C4</td>
</tr>
</table>
You'll need some css to set the height of the row;
table td, tr {
height: 30px;
}
table td, tr {
height: 30px;
}
<table border="1">
<tbody>
<tr>
<td rowSpan="2">A1</td>
<td rowSpan="2">A2</td>
<td rowSpan="2">A3</td>
<td rowSpan="2">A4</td>
</tr>
<tr>
</tr>
<tr>
<td>C1</td>
<td>C2</td>
<td>C3</td>
<td>C4</td>
</tr>
</tbody>
</table>
Note; You should add a tbody to your table; What is the purpose for HTML's tbody?
Are you trying to do that ?
<table border="1">
<tr>
<td>A1</td>
<td>A2</td>
<td>A3</td>
<td rowspan="2">A4/B4 <br>(2 rows)</td>
</tr>
<tr>
<td>B1</td>
<td>B2</td>
<td>B3</td>
</tr>
<tr>
<td>C1</td>
<td colspan="2">C2/C3 <br>(2 cols)</td>
<td>C4</td>
</tr>
</table>
The rowspan property should only be used if you are trying to have one cell appear across two rows (as if you are using the Merge Cells functionality on Excel). If you want to make one row twice as high as the other, this is a display property and should be done with css or inline styling. The middle (row) should also be removed.
If this is just a general example and you need to use it on something more complex. If you use rowspan on say 1 element, you will need to make sure that the following row has 1 less td element otherwise it will not display correctly.
<table border="1">
<tr style="height: 50px">
<td >A1</td>
<td >A2</td>
<td >A3</td>
<td >A4</td>
</tr>
<tr>
<td>C1</td>
<td>C2</td>
<td>C3</td>
<td>C4</td>
</tr>
</table>
Table with 3 rows. the first row span 1.5 column each
I am 2 months into learning html and i came across a task where i have no idea of where to start from. I want to implement a html table with 3 rows, the first row however should have two equal parts of columns and the other two to have 3 equal parts. Please help.
Here is a rough code for it:
<table>
<tr>
<td>one</td>
<td>two</td>
</tr>
<tr>
<td>three</td>
<td>four</td>
<td> five</td>
</tr>
<tr>
<td>six</td>
<td>seven</td>
<td> eight</td>
</tr>
</table>
You can use colspan. The colspan attribute defines the number of columns a table cell should span.
table, th, td {
border: 1px solid black;
}
<table>
<tr>
<td colspan='3'>one </td>
<td colspan='3'> two </td>
</tr>
<tr>
<td colspan='2'>three</td>
<td colspan='2'>four</td>
<td colspan='2'> five</td>
</tr>
<tr>
<td colspan='2'>six</td>
<td colspan='2'>seven</td>
<td colspan='2'> eight</td>
</tr>
</table>
I want to create a table like shown in the image using HTML. How to do?
User colspan="3" attribute if you need marge two cells into one .
w3schools
th, td {
background: #ddd;
padding: 2px;
}
<table>
<tr>
<th> </th>
<th>9AM</th>
<th>10AM</th>
<th>11AM</th>
<th>12AM</th>
</tr>
<tr>
<td>Mon day</td>
<td colspan="2">1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>tuesDay</td>
<td scope="col" colspan="3"> </td>
<!-- The following two cells will appear under the same header -->
<td>Col 1</td>
</tr>
</table>