Update
More solved examples here
--
I am having a hard time with rowspans in a table.
I want to achieve the followings.
Explanation is always appreciated.
Also, any other example you think it would help understand, please share.
Here's the snippet:
<table border='1'>
<tr>
<th>Month</th>
<th>Savings</th>
<th>Savings for holiday!</th>
</tr>
<tr>
<td rowspan="2">January</td>
<td>$100</td>
<td>$50</td>
</tr>
<tr>
<td>February</td>
<td>$80</td>
</tr>
</table>
<br><br><br>
<table border='1'>
<tr>
<th>Month</th>
<th>Savings</th>
<th>Savings for holiday!</th>
</tr>
<tr>
<td rowspan="2">January</td>
<td>$100</td>
<td>$50</td>
</tr>
<tr>
<td>February</td>
<td>$80</td>
</tr>
</table>
try the following code it's easy to understand if you get to know about how the flow of table works
<table border='1'>
<tr>
<th>Month</th>
<th>Savings</th>
<th>Savings for holiday!</th>
</tr>
<tr>
<td rowspan="2">January</td>
<td rowspan="2">$100</td>
<td>$50</td>
</tr>
<tr>
<td>$80</td>
</tr>
</table>
<br><br><br>
<table border='1'>
<tr>
<th>Month</th>
<th>Savings</th>
<th>Savings for holiday!</th>
</tr>
<tr>
<td rowspan="2">January</td>
<td>$100</td>
<td rowspan="2">$50</td>
</tr>
<tr>
<td>February</td>
</tr>
</table>
Related
Rowspan And Colspan For Building HTML Tables.
I want the first five column in a single row without any data as shown in editable fig. ,Can use rowspan or colspan.
Only The Last Two Column is as it is as shown in the editable fig. And There should be a row before that two column which is the combination of the five columns and that should be blank.
<div class="row">
<div class="col-12">
<table>
<thead>
<tr>
<th>Savings for holiday!</th>
<th>Date!</th>
<th>Year</th>
<th>Month</th>
<th>Time</th>
<th>Name</th>
<th>Gender</th>
</tr>
</thead>
<tbody>
<tr>
<td>$100</td>
<td>10/10/2020</td>
<td>2020</td>
<td>January</td>
<td>4:30pm</td>
<td>hrishi</td>
<td>male</td>
</tr>
</tbody>
<tbody>
<tr>
<td>$100</td>
<td>10/10/2020</td>
<td>2020</td>
<td>January</td>
<td>4:30pm</td>
<td>hrishi</td>
<td>male</td>
</tr>
</tbody>
</table>
</div>
</div>
See the code below.
<table>
<tr>
<th colspan="5" rowspan="3" width="300"></th>
<th>Name</th>
<th>Gender</th>
</tr>
<tr>
<td>hrishi</td>
<td>male</td>
</tr>
<tr>
<td>hrishi</td>
<td>male</td>
</tr>
</table>
I applied the bootstrap css class in css file and got my answer.
<table>
<tr>
<th colspan="5" rowspan="3" class="w-70"></th>
<th>Name</th>
<th>Gender</th>
</tr>
<tr>
<td>hrishi</td>
<td>male</td>
</tr>
<tr>
<td>hrishi</td>
<td>male</td>
</tr>
</table>
And add the width property in style.css file -
.w-70 {
width: 70%;
}
I just want to ask if how I can put the <td> on the top since I used a rowspan on the <td>. Please see sample below.
This is my code:
<table>
<tr>
<th>Month</th>
<th>Savings</th>
<th>Savings for holiday!</th>
</tr>
<tr>
<td rowspan="2">
<div>January</div>
<div>test</div>
<div>test</div>
</td>
</tr>
<tr class="rowsl">
<td>February</td>
<td>$80</td>
</tr>
<tr>
<td rowspan="2">January</td>
</tr>
<tr>
<td>February</td>
<td>$80</td>
</tr>
</table>
I want to have it this way like picture:
You've got multiple solutions.
My main suggestion will be to remove all rowspans and the multiple trs.
See the code I changed into comment in the snippet below:
<table border="1">
<tr>
<th>Month</th>
<th>Savings</th>
<th>Savings for holiday!</th>
</tr>
<tr>
<td><!-- rowspan="2"-->
<div>January</div>
<div>test</div>
<div>test</div>
</td>
<!--/tr>
<tr class="rowsl"-->
<td>February</td>
<td>$80</td>
</tr>
<tr>
<td><!-- rowspan="2"-->January</td>
<!--/tr>
<tr-->
<td>February</td>
<td>$80</td>
</tr>
</table>
From the snippet above, if you ever need to add lines in the td, you can add divs like you did for the month, and maybe stylize it a little, like that:
td div {
border-bottom: 1px solid black;
}
/* Or use the one below if you don't want the first column to be stylized
td:not(:first-child) div {
border-bottom: 1px solid black;
}
*/
<table border="1">
<tr>
<th>Month</th>
<th>Savings</th>
<th>Savings for holiday!</th>
</tr>
<tr>
<td>
<div>January</div>
<div>test</div>
<div>test</div>
</td>
<td>
<div>February</div>
<div>test</div>
<div>test</div>
</td>
<td>
<div>$80</div>
<div>test</div>
<div>test</div>
</td>
</tr>
<tr>
<td>January</td>
<td>February</td>
<td>$80</td>
</tr>
</table>
Or, you can do the following, keep the rowspan and add the empty tds that will make your table structure consistent:
<table border="1">
<tr>
<th>Month</th>
<th>Savings</th>
<th>Savings for holiday!</th>
</tr>
<!-- Do the following -->
<tr>
<td rowspan="2">
<div>January</div>
<div>test</div>
<div>test</div>
</td>
<td>February</td>
<td>$80</td>
</tr>
<tr>
<td>-</td>
<td>-</td>
</tr>
<tr>
<td>January</td>
<td>February</td>
<td>$80</td>
</tr>
</table>
Why you can move all rowspan td in one tr
<table border="1">
<tr>
<th>Month</th>
<th>Savings</th>
<th>Savings for holiday!</th>
</tr>
<tr>
<td rowspan="2">
<div>January</div>
<div>test</div>
<div>test</div>
</td>
<td rowspan="2" style="vertical-align:top">February</td>
<td rowspan="2" style="vertical-align:top">$80</td>
</tr>
<tr class="rowsl">
</tr>
<tr>
<td rowspan="2">January</td>
<td>February</td>
<td>$80</td>
</tr>
</table>
Not sure my answer is what you are looking for:
<table border ="1">
<tr>
<th>Month</th>
<th>Savings</th>
<th>Savings for holiday!</th>
</tr>
<tr >
<td rowspan="2" >
<div>January</div><div>test</div><div>test</div>
</td>
<td>February</td>
<td>$80</td>
</tr>
<tr class="rowsl">
</tr>
<tr>
<td rowspan="2">January</td>
</tr>
<tr>
<td>February</td>
<td>$80</td>
</tr>
</table>
The only way I see is putting it in the same row, but then you will have the same height:
<table border="1">
<tr>
<th>Month</th>
<th>Savings</th>
<th>Savings for holiday!</th>
</tr>
<tr>
<td rowspan="2">
<div>January</div>
<div>test</div>
<div>test</div>
</td>
<td rowspan="2" >February</td>
<td rowspan="2" >$80</td>
</tr>
<tr>
<td rowspan="2">January</td>
</tr>
<tr>
<td>February</td>
<td>$80</td>
</tr>
You may also write as below code,
<table border=1>
<tr>
<th>Month</th>
<th>Savings</th>
<th rowspan="2">Savings for holiday!</th>
</tr>
<tr>
<td rowspan="2" >
<div>January</div>
<div>test</div>
<div>test</div>
</td>
</tr>
<tr class="rowsl">
<td>February</td>
<td>$80</td>
</tr>
<tr>
<td rowspan="2">January</td>
</tr>
<tr>
<td>February</td>
<td>$80</td>
</tr>
</table>
i wanna create something like this in my table
i try with this code, but the result far from what i want
<table>
<tr>
<td rowspan="3">No</td>
<td rowspan="3">Item1</td>
</tr>
<tr>
<td>SubItem1a</td>
<td>Subitem1b</td>
<td>Subitem1c</td>
</tr>
<tr>
<td>AnotherSub1a</td>
<td>AnotherSub1b</td>
<td>AnotherSub1c</td>
</tr>
</table>
or
<table>
<tr>
<td rowspan="3">No</td>
<td rowspan="3">Item1</td>
<td>
<tr>SubItem1a</tr>
<tr>Subitem1b</tr>
<tr>Subitem1c</tr>
</td>
<td>
<tr>AnotherSub1a</tr>
<tr>AnotherSub1b</tr>
<tr>AnotherSub1c</tr>
</td>
</tr>
</table>
how to archive table like image?
Now used to this code rowspan Attribute
<table border="1" style="border-collapse: collapse; border-spacing: 0; width: 100%;">
<tr>
<td rowspan="3" align="center">No</td>
<td rowspan="3" align="center">Item1</td>
<td>SubItem1a</td>
<td>SubItem1a</td>
</tr>
<tr>
<td>Subitem1b</td>
<td>Subitem1c</td>
</tr>
<tr>
<td>AnotherSub1b</td>
<td>AnotherSub1c</td>
</tr>
</table>
This will help with your future reference.
I did some example hopefully you understand what is rowspan and colspan.
<h1> Without using Rowspan </h1>
<table border="1">
<tr>
<th>How</th>
<th>it</th>
<th>Work</th>
<th>Rowspan</th>
<th>First</th>
</tr>
<tr>
<td>10</td>
<td >20</td>
<td >30</td>
<td >40</td>
<td >50</td>
</tr>
<tr>
<td>60</td>
</tr>
<tr>
<td>70</td>
<td>80</td>
<td>90</td>
<td>100</td>
<td>110</td>
</tr>
</table>
<hr>
<h1> using Rowspan </h1>
<table border="1">
<tr>
<th>How</th>
<th>it</th>
<th>Work</th>
<th>Rowspan</th>
<th>First</th>
</tr>
<tr>
<td rowspan="2">10</td>
<td rowspan="2">20</td>
<td rowspan="2">30</td>
<td rowspan="2" >40</td>
<td >50</td>
</tr>
<tr>
<td>60</td>
</tr>
<tr>
<td>70</td>
<td>80</td>
<td>90</td>
<td>100</td>
<td>110</td>
</tr>
</table>
<hr>
<h1> using colspan </h1>
<table border="1">
<tr>
<th colspan="5">Hello World</th>
</tr>
<tr>
<th>How</th>
<th>it</th>
<th>Work</th>
<th>Rowspan</th>
<th>First</th>
</tr>
<tr>
<td rowspan="2">10</td>
<td rowspan="2">20</td>
<td rowspan="2">30</td>
<td rowspan="2" >40</td>
<td >50</td>
</tr>
<tr>
<td>60</td>
</tr>
<tr>
<td>70</td>
<td>80</td>
<td>90</td>
<td>100</td>
<td>110</td>
</tr>
</table>
DEMO
How do I place 3 different tables - L1, L2, R1 in the specified below position:
L1 on Top Left - 2 rows
L2 immediately below L1 on the Left - 2 rows.
R1 on the Top Right - This has 10 rows
The issue is L2 is placed way below L1 as it is inline, how can I make it appear right below L1? Should float left / right or any other setting can help me achieve this?
https://jsfiddle.net/cyppyntp/4/
<table class="one" id="L1">
<tr>
<th>Month-1</th>
<th>Savings-1</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
</table>
<table class="one" id="L2">
<tr>
<th>Month-2</th>
<th>Savings-2</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$200</td>
</tr>
<tr>
<td>March</td>
<td>$100</td>
</tr>
<tr>
<td>April</td>
<td>$600</td>
</tr>
<tr>
<td>May</td>
<td>$100</td>
</tr>
<tr>
<td>June</td>
<td>$100</td>
</tr>
<tr>
<td>July</td>
<td>$100</td>
</tr>
<tr>
<td>August</td>
<td>$100</td>
</tr>
<tr>
<td>Sep</td>
<td>$100</td>
</tr>
<tr>
<td>Oct</td>
<td>$100</td>
</tr>
<tr>
<td>Nov</td>
<td>$100</td>
</tr>
</table>
<table class="two" id="R1">
<tr>
<th>Month-3</th>
<th>Savings-3</th>
</tr>
<tr>
<td>December</td>
<td>$400</td>
</tr>
</table>
.inlineTable {
display: inline-block;
}
table.one {
width:45%;
display:inline-block;
vertical-align:top;
}
table.two {
text-align:left;
}
See this fiddle
I've changed the order of your tables slightly. Also, I have added two new divs. See the HTML below
<div class="left">
<table class="one">
<tr>
<th>Month-1</th>
<th>Savings-1</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
</table>
<table class="two">
<tr>
<th>Month-3</th>
<th>Savings-3</th>
</tr>
<tr>
<td>December</td>
<td>$400</td>
</tr>
</table>
</div>
<div class="right">
<table class="one">
<tr>
<th>Month-2</th>
<th>Savings-2</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$200</td>
</tr>
<tr>
<td>March</td>
<td>$100</td>
</tr>
<tr>
<td>April</td>
<td>$600</td>
</tr>
<tr>
<td>May</td>
<td>$100</td>
</tr>
<tr>
<td>June</td>
<td>$100</td>
</tr>
<tr>
<td>July</td>
<td>$100</td>
</tr>
<tr>
<td>August</td>
<td>$100</td>
</tr>
<tr>
<td>Sep</td>
<td>$100</td>
</tr>
<tr>
<td>Oct</td>
<td>$100</td>
</tr>
<tr>
<td>Nov</td>
<td>$100</td>
</tr>
</table>
</div>
And, also added the below given CSS
.left,.right{
float:left;
width:50%;
}
I'm not a big fan of floats, but they work here without any change to your markup other than class values. You could accomplish the same without even that by using a :first-child selector.
.inlineTable {
display: inline-block;
}
table {
width: 45%;
vertical-align: top;
background: #ddd;
margin-bottom: 10px;
}
table.left {
float: left;
}
table.right {
float: right;
}
<table class="left">
<tr>
<th>Month-1</th>
<th>Savings-1</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
</table>
<table class="right">
<tr>
<th>Month-2</th>
<th>Savings-2</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$200</td>
</tr>
<tr>
<td>March</td>
<td>$100</td>
</tr>
<tr>
<td>April</td>
<td>$600</td>
</tr>
<tr>
<td>May</td>
<td>$100</td>
</tr>
<tr>
<td>June</td>
<td>$100</td>
</tr>
<tr>
<td>July</td>
<td>$100</td>
</tr>
<tr>
<td>August</td>
<td>$100</td>
</tr>
<tr>
<td>Sep</td>
<td>$100</td>
</tr>
<tr>
<td>Oct</td>
<td>$100</td>
</tr>
<tr>
<td>Nov</td>
<td>$100</td>
</tr>
</table>
<table class="left">
<tr>
<th>Month-3</th>
<th>Savings-3</th>
</tr>
<tr>
<td>December</td>
<td>$400</td>
</tr>
</table>
Demo
I want to do this as easily as possible with out any additional libraries.
In my very long table I want to add a scrollbar to the <tbody> tag so that the head is always visible but it wont work. can you please help.
fiddle : http://jsfiddle.net/Hpx4L/
<table border="1">
<thead>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
</thead>
<tfoot>
<tr>
<td>Sum</td>
<td>$180</td>
</tr>
</tfoot>
<tbody style="overflow-y:scroll; height:100px;"> <!-- wont work -->
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$80</td>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$80</td>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$80</td>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$80</td>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$80</td>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$80</td>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$80</td>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$80</td>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$80</td>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$80</td>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$80</td>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$80</td>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$80</td>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$80</td>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$80</td>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$80</td>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$80</td>
</tr>
</tbody>
</table>
you can wrap the content of the <tbody> in a scrollable <div> :
html
....
<tbody>
<tr>
<td colspan="2">
<div class="scrollit">
<table>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$80</td>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$80</td>
</tr>
...
css
.scrollit {
overflow:scroll;
height:100px;
}
see my jsfiddle, forked from yours: http://jsfiddle.net/VTNax/2/
These solutions often have issues with the header columns aligning with the body columns, and may not work properly when resizing. I know you didn't want to use an additional library, but if you happen to be using jQuery, this one is really small. It supports fixed header, footer, column spanning (colspan), horizontal scrolling, resizing, and an optional number of rows to display before scrolling starts.
jQuery.scrollTableBody (GitHub)
As long as you have a table with proper <thead>, <tbody>, and (optional) <tfoot>, all you need to do is this:
$('table').scrollTableBody();
This is because you are adding your <tbody> tag before <td> in table you cannot print any data without <td>.
So for that you have to make a <div> say #header with position: fixed;
header
{
position: fixed;
}
make another <div> which will act as <tbody>
tbody
{
overflow:scroll;
}
Now your header is fixed and the body will scroll. And the header will remain there.
If you don't want to wrap a table under any div:
table{
table-layout: fixed;
}
tbody{
display: block;
overflow: auto;
}