Html Css Table format merge row - html

So i'm working on Crud java webbapp and i want to the desgin the table head so it will looks like this....
But i cannot make it through the html format.....
here is my try
Here is the Html Code
<div class="col-md-9">
<h3>Student Information From Database</h3>
<table class="table">
<thead class="bg-light">
<tr>
<th scope="col">ID</th>
<th scope="col">Full Name</th>
<th scope="col">Status</th>
<th colspan="2">Major 1</th>
</tr>
<tr>
<th>col1</th>
<th>col2</th>
<th>col3</th>
</tr>
</tr>
</thead>
<tbody>
</tbody>
</table>


do you want something like this;
<table border="2">
<tr>
<td> </td>
<td> </td>
<td> </td>
<td colspan="3">Major1</td>
</tr>
<tr>
<td>ID</td>
<td>FullName</td>
<td>Status</td>
<td>physics</td>
<td>calculus</td>
<td>biologi</td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>


Here is an example:
<table>
<thead>
<tr>
<th>ID</th>
<th>FULL NAME</th>
<th>STATUS</th>
<th colspan="3">
MAJOR 1
<table style="width:100%">
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
</table>
</th>
</tr>
</thead>
</table>


<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
<style>
table, th, td {
border: 1px solid black;
text-align: center;
border-collapse: collapse;
}
.brdst{
text-align: center;
border-right:1px;
}
</style>
</head>
<body>
<table>
<tr>
<td colspan="3" class="brdst"></td>
<td colspan="3" class="brdst">Major1</td>
</tr>
<tr>
<td>ID</td>
<td>Full Name</td>
<td>Status</td>
<td>Physics</td>
<td>Clculus</td>
<td>Bioloy1</td>
</tr>
<tr>
<td>Add col here</td>
strong text <td>Add col here</td>
<td>Add col here</td>
<td>Add col here</td>
<td>Add col here</td>
<td>Add col here</td>
</tr>
</table>
</body>
</html>


You can do this with colspan & rowspan attributes.
Demo: https://jsfiddle.net/ycnar3gv/
<table>
<thead>
<tr>
<th rowspan="2">ID</th>
<th rowspan="2">Full Name</th>
<th rowspan="2">Status</th>
<th colspan="3">Major 1</th>
</tr>
<tr>
<th>col1</th>
<th>col3</th>
<th>col3</th>
</tr>
</tr>
</thead>
</table>

Related

how to make table in html using rowspan and colspan?

How to build this table in html ??
I want to make table using rowspan and colspan ?
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"/>
<table class="table table-bordered">
<thead>
<th>Subject</th>
<th>Result</th>
</thead>
<tbody>
<tr>
<td>Science</td>
<td>Physics</td>
<td>Chemistry</td>
<td>Other Science</td>
<td>Math</td>
<td>English</td>
</tr>
</tbody>
</table>

You can learn about <table> tags at MDN
You can do this:
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" />
<table class="table table-bordered">
<thead>
<tr>
<th colspan="2">Subject</th>
<th>Result</th>
</tr>
</thead>
<tbody>
<tr>
<td rowspan="2">Science</td>
<td>Physics</td>
<td>A</td>
</tr>
<tr>
<td>Chemistry</td>
<td>A</td>
</tr>
<tr>
<td rowspan="2">Other Science</td>
<td>Biology</td>
<td>B</td>
</tr>
<tr>
<td>Geography</td>
<td>A</td>
</tr>
<tr>
<td colspan="2">Math</td>
<td>A+</td>
</tr>
<tr>
<td colspan="2">English</td>
<td>A+</td>
</tr>
</tbody>
</table>

This is set-up with colspan and rowspan
table {
border-collapse: collapse;
}
table,
tr,
th,
td {
border: 1px solid #000;
}
th {
padding: 1ex;
background: #ccc;
}
td {
padding: 1ex;
}
.divide td {
border-top: 3px solid;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" />
<table class="table table-bordered">
<thead>
<th colspan="2">Subject</th>
<th>Result</th>
</thead>
<tbody>
<tr>
<td rowspan="2" colspan="1" width="100px">
SCIENCE
</td>
<td>
Physics
</td>
<td>A</td>
</tr>
<tr>
<td>
<span>Chemistry</span>
</td>
<td colspan="1">A</td>
</tr>
<tr>
<td rowspan="2" colspan="1" width="100px">
SCIENCE
</td>
<td>
Physics
</td>
<td>A</td>
</tr>
<tr>
<td>
<span>Chemistry</span>
</td>
<td colspan="1">A</td>
</tr>
<tr>
<td colspan="2">
SCIENCE
</td>
<td>A</td>
</tr>
<tr>
<td colspan="2">
SCIENCE
</td>
<td>A</td>
</tr>
</tbody>
</table>
<br>
<br>
<table>
<tr>
<th>head</th>
<th>title</th>
<th>title</th>
<th>title</th>
<th></th>
</tr>
<tr>
<td>
<input type="checkbox">
</td>
<td>content</td>
<td>content</td>
<td>content</td>
<td rowspan="2">white</td>
</tr>
<tr>
<td colspan="4">
lorem ipsum
</td>
</tr>
<tr class="divide">
<td>
<input type="checkbox">
</td>
<td>content</td>
<td>content</td>
<td>content</td>
<td rowspan="2">gray</td>
</tr>
<tr>
<td colspan="4">
lorem ipsum
</td>
</tr>
<tr class="divide">
<td>
<input type="checkbox">
</td>
<td>content</td>
<td>content</td>
<td>content</td>
<td>white</td>
</tr>
<tr class="divide">
<td>
<input type="checkbox">
</td>
<td>content</td>
<td>content</td>
<td>content</td>
<td rowspan="2">gray</td>
</tr>
<tr>
<td colspan="4">
lorem ipsum
</td>
</tr>
</table>

Creating complex table structure without using css

I am trying to make this table in HTML without using CSS, but I am not getting the desired output. I have tried a bunch of other combinations for the row with 6:2:3 rowspan.
This is the desired output
This is the code I am using.
<!doctype html>
<html>
<head>
<title>Table</title>
</head>
<body>
<table border="1">
<tr>
<th rowspan="3"> </th>
<th colspan="3"> </th>
</tr>
<tr>
<th colspan="2"> </th>
<th rowspan="2"> </th>
</tr>
<tr>
<th> </th>
<th> </th>
</tr>
<tr>
<td rowspan="2"> </td>
<td rowspan="2"> </td>
<td rowspan="2"> </td>
<td > </td>
</tr>
<tr>
<td > </td>
</tr>
<tr>
<td rowspan="6"> </td>
<td rowspan="2"> </td>
<td rowspan="2"> </td>
<td rowspan="3"> </td>
</tr>
<tr>
<td rowspan="2"> </td>
<td rowspan="2"> </td>
</tr>
<tr>
<td rowspan="2"> </td>
<td rowspan="2"> </td>
<td rowspan="3"> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
</body>
</html>

Done Heights may not be set but it works properly
table,
td {
border: 1px solid black;
}
td {
height: 50px;
}
<table style="width:100%">
<tr>
<td>5</td>
<td colspan="3">
<table style="width:100%">
<tr>
<td>
<table style="width:100%;margin-top:50px;">
<tr>
<td>6</td>
</tr>
</table>
</td>
<td>7</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>8</td>
<td>9</td>
<td>10</td>
<td>
<table style="width:100%">
<tr>
<td>11</td>
</tr>
</table>
<table style="width:100%">
<tr>
<td>12</td>
</tr>
</table>
</td>
</tr>
<tr>
<td></td>
<td class="not">
<table style="width:100%">
<tr>
<td>13</td>
</tr>
<tr>
<td>14</td>
</tr>
<tr>
<td>15</td>
</tr>
</table>
</td>
<td colspan="2">
<table style="width:100%">
<tr>
<td>16</td>
</tr>
<tr>
<td>17</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>18</td>
<td>16</td>
<td>20</td>
<td>21</td>
</tr>
</table>

Align table each other horizontally

I have this table but I am not able to put them side by side horizontally, I tried many things but I am clearly missing something, what would you recommend? I am struggling with those columns.
Update:
I have 7 tables, they do have 3 columns but the number of row is different from each other.
I am using a theme bootstrap v4. Whenever I do a class="table" it goes all wrong.
<div class="table">
<table class="table-striped" style="display: inline-block; float: left; ">
<thead>
<tr>
<th style="width:200px;"> Module </th>
<th style="width:120px;"> Info </th>
<th> Value </th>
</tr>
</thead>
<tbody>
<tr>
<td> ACU </td>
<td> Fls </td>
<td> 0</td> </tr>
<tr>
<td> Mode</td>
<td> Trk</td>
<td> 3</td>
</tr>
<tr>
<td> Use</td>
<td> PS</td>
<td> 43</td>
</tr>
</tbody>
</table>
<table class="table-striped" style="display: inline-block; margin-left:150px;">
<thead>
<tr>
<th style="width:200px;"> Module </th>
<th style="width:120px;"> Info </th>>
<th> Value </th>
</tr>
</thead>
<tbody>
<tag2>
<tr>
<td> PBit</td>
<td> Lock</td>
<td> 1</td>
</tr>
<tr><td> Bit</td>
<td> NA</td>
<td> 0</td>
</tr>
<tr>
<td> it</td>
<td> Lock</td>
<td> 1</td>
</tr>
<tr>
<td> Bit</td>
<td> NA</td>
<td> 0</td>
</tr>
<tr>
<td> Bit</td>
<td> Lock</td>
<td> 1</td>
</tr>
<tr>
<td> Bit</td>
<td> NA</td>
<td> 0</td>
</tr>
</tbody>
</table>

I added extra merge_table div that wrap your two table inside it so, after i can use flexbox to get table side by side.
I used d-flex class, stands for display: flex and for distinguish between two table i added ml-3 stand for margin-left.
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<div class="merge_table d-flex">
<table class="border">
<thead>
<tr>
<th> Module </th>
<th> Info </th>
<th> Value </th>
</tr>
</thead>
<tbody>
<tr>
<td> Mode</td>
<td> Track</td>
<td> 3</td>
</tr>
<tr>
<td> A</td>
<td> PS</td>
<td> 43</td>
</tr>
</tbody>
</table>
<table class="border ml-3">
<thead>
<tr>
<th> Module </th>
<th> Info </th>
<th> Value </th>
</tr>
</thead>
<tbody>
<tr>
<td> Mode</td>
<td> Track</td>
<td> 3</td>
</tr>
<tr>
<td> A</td>
<td> PS</td>
<td> 43</td>
</tr>
</tbody>
</table>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>

Just change your table position to inline-block. This will allow your table elements to be positioned on the same line horizontally as one another. You should do this in a css file or in the head of the document rather than inline if possible. Also, for reference, display:float is not valid css. Here is a fiddle for you.
table{
border:1px solid black;
display:inline-block;
margin:20px;
}
<table>
<thead>
<tr>
<th> Module </th>
<th> Info </th>
<th> Value </th>
</tr>
</thead>
<tbody>
<tr>
<td> Mode</td>
<td> Track</td>
<td> 3</td>
</tr>
<tr>
<td> A</td>
<td> PS</td>
<td> 43</td>
</tr>
</tbody>
</table>
<table>
<thead>
<tr>
<th> Module </th>
<th> Info </th>
<th> Value </th>
</tr>
</thead>
<tbody>
<tr>
<td> Mode</td>
<td> Track</td>
<td> 3</td>
</tr>
<tr>
<td> A</td>
<td> PS</td>
<td> 43</td>
</tr>
</tbody>
</table>

Try this:-
<!DOCTYPE html>
<html lang="en">
<style>
.tbl{
border : 1px solid black;
float: left;
margin: 0 5px;
}
.row{
margin: 5px;
}
.clear{
clear: both;
}
</style>
<body>
<div class="row">
<table class="tbl2 tbl">
<tr>
<td>2-11</td>
<td>2-12</td>
<td>2-13</td>
</tr>
<tr>
<td>2-21</td>
<td>2-22</td>
<td>2-23</td>
</tr>
<tr>
<td>2-31</td>
<td>2-32</td>
<td>2-33</td>
</tr>
</table>
<table class="tbl2 tbl">
<tr>
<td>2-11</td>
<td>2-12</td>
<td>2-13</td>
</tr>
<tr>
<td>2-21</td>
<td>2-22</td>
<td>2-23</td>
</tr>
<tr>
<td>2-31</td>
<td>2-32</td>
<td>2-33</td>
</tr>
</table>
<table class="tbl3 tbl">
<tr>
<td>2-11</td>
<td>2-12</td>
<td>2-13</td>
</tr>
<tr>
<td>2-21</td>
<td>2-22</td>
<td>2-23</td>
</tr>
<tr>
<td>2-31</td>
<td>2-32</td>
<td>2-33</td>
</tr>
</table>
<div class="clear"></div>
</div>
<div class="row">
<table class="tbl4 tbl">
<tr>
<td>2-11</td>
<td>2-12</td>
<td>2-13</td>
</tr>
<tr>
<td>2-21</td>
<td>2-22</td>
<td>2-23</td>
</tr>
<tr>
<td>2-31</td>
<td>2-32</td>
<td>2-33</td>
</tr>
</table>
<table class="tbl5 tbl">
<tr>
<td>2-11</td>
<td>2-12</td>
<td>2-13</td>
</tr>
<tr>
<td>2-21</td>
<td>2-22</td>
<td>2-23</td>
</tr>
<tr>
<td>2-31</td>
<td>2-32</td>
<td>2-33</td>
</tr>
</table>
<table class="tbl6 tbl">
<tr>
<td>2-11</td>
<td>2-12</td>
<td>2-13</td>
</tr>
<tr>
<td>2-21</td>
<td>2-22</td>
<td>2-23</td>
</tr>
<tr>
<td>2-31</td>
<td>2-32</td>
<td>2-33</td>
</tr>
</table>
<div class="clear"></div>
</div>
<div class="row">
<table class="tbl7 tbl">
<tr>
<td>2-11</td>
<td>2-12</td>
<td>2-13</td>
</tr>
<tr>
<td>2-21</td>
<td>2-22</td>
<td>2-23</td>
</tr>
<tr>
<td>2-31</td>
<td>2-32</td>
<td>2-33</td>
</tr>
</table>
<div class="clear"></div>
</div>
</body>
</body>
</html>
output is :

How to separate nested table conspicuously?

How can i separate nested table in lower table as conspicuously as in upper table?
Upper table is not proper though.
I am trying to get Settlements Finance Time 3 Time 5 Bad Good in a single line in lower table.
Here is my code:
.my-table {
border: 1px solid #000;
}
.my-table tr:nth-child(even) {
background: #ddd;
}
.my-table tr:nth-child(odd) {
background: #fff;
}
<table class="my-table">
<tr>
<th>Service</th>
<th>Provider</th>
<th>Check</th>
<th>Marker</th>
<th>Captured Time</th>
<th>Final Time</th>
<th>Status</th>
<th>Comments</th>
</tr>
<tr>
<th>Sub Heading</th>
</tr>
<tr>
<td>Custody C</td>
<td>I</td>
<td>
<table>
<tr>
<td>Settlements</td>
<td>Finance</td>
<td>Time 3</td>
<td>Time 5</td>
<td>Bad</td>
<td>Good</td>
</tr>
</table>
<table>
<tr>
<td>Crossroad</td>
<td>
<table>
<tr>
<td>Complete</td>
</tr>
<tr>
<td>Partial</td>
</tr>
</table>
</td>
<td>
<table>
<tr>
<td>Time 4a</td>
</tr>
<tr>
<td>Time 4b</td>
</tr>
</table>
</td>
<td>
<table>
<tr>
<td>Time 6a</td>
</tr>
<tr>
<td>Time 6b</td>
</tr>
</table>
</td>
<td>Ok</td>
<td>danke</td>
</tr>
</table>
</td>
</tr>
</table>
<br>
<table class="my-table">
<tr>
<th>Service</th>
<th>Provider</th>
<th>Check</th>
<th>Marker</th>
<th>Captured Time</th>
<th>Final Time</th>
<th>Status</th>
<th>Comments</th>
</tr>
<tr>
<th>Sub Heading</th>
</tr>
<tr>
<td>Custody T</td>
<td>G</td>
<td>
<table>
<tr>
<td>Trades</td>
</tr>
<tr>
<td>Position</td>
</tr>
</table>
</td>
<td>Latest</td>
<td>TIME 1</td>
<td>TIME 2</td>
<td>Good</td>
<td>My Comments</td>
</tr>
<tr>
<td>Custody C</td>
<td>I</td>
<td>
<table>
<tr>
<td>Settlements</td>
</tr>
<tr>
<td>Crossroad</td>
</tr>
</table>
</td>
<td>
<table>
<tr>
<td>Finance</td>
</tr>
<tr>
<td>
<table>
<tr>
<td>Complete</td>
</tr>
<tr>
<td>Partial</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
<td>
<table>
<tr>
<td>Time 3</td>
</tr>
<tr>
<td>
<table>
<tr>
<td>Time 4a</td>
</tr>
<tr>
<td>Time 4b</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
<td>
<table>
<tr>
<td>
Time 5
</td>
</tr>
<tr>
<td>
<table>
<tr>
<td>Time 6a</td>
</tr>
<tr>
<td>Time 6b</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
<td>
<table>
<tr>
<td>Bad</td>
</tr>
<tr>
<td>Ok</td>
</tr>
</table>
</td>
<td>
<table>
<tr>
<td>Good</td>
</tr>
<tr>
<td>danke</td>
</tr>
</table>
</td>
</tr>
<tr>
</tr>
</table>

To answer the question:
I am trying to get Settlements Finance Time 3 Time 5 Bad Good in a single line in lower table.
Vertically aligning your table cells will bring the content to the top of the cells, regardless of how many lines of content follows.
.my-table td {
vertical-align: top;
}
JSFiddle Example: https://jsfiddle.net/jennifergoncalves/y1Lr0mzw/
Please let me know if I missed what you were trying to accomplish.

setting rowspan in td 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