Create table within table in HTML - html

Below shows my HTML code & it's result.
<html>
<body>
<table width="75%">
<td>
<table width="99%" border="4">
<tr>
<th>NAME</th>
<th>AGE</th>
</tr>
<tr>
<td>Dilantha</td>
<td>30</td>
</tr>
<tr>
<td>Chamal</td>
<td>25</td>
</tr>
<tr>
<td>Rose</td>
<td>20</td>
</tr>
</table>
</td>
<td>
<table width="99%" border="4">
<tr>
<th>NAME</th>
<th>YEAR</th>
</tr>
<tr>
<td>Jhon</td>
<td>2010</td>
</tr>
</table>
</td>
</table>
</body>
</html>
But I need to show below result. Please help me to complete my HTML code.
Thank you.


I think you are expecting the following one right?
<html>
<body>
<table width="75%">
<td>
<table width="99%" border="4">
<tr><th > NAME </th>
<th > AGE</th>
</tr>
<tr>
<td>Dilantha</td>
<td>30</td>
</tr>
<tr>
<td>Chamal</td>
<td>25</td>
</tr>
<tr>
<td>Rose</td>
<td>20</td>
</tr>
</table>
</td>
<td style="vertical-align:top">
<table width="99%" border="4">
<tr><th > NAME </th>
<th>YEAR</th>
</tr>
<tr>
<td>Jhon</td>
<td>2010</td>
</tr>
</table>
</td>
</table>
</body>
</html>


Try this code:
DEMO
<td style='vertical-align: top;'>

Related

Html Css Table format merge row

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>

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>

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

HTML Table not displaying properly

Hey guys I was creating this table table recently in HTML.
image:http://imgur.com/wPXCwrd
The table (shown in image) created perfectly but a weird blank row was created (marked red in image). When I tried to delete that code the entire cells below the QUESTIONS row gets shifted (image link:http://imgur.com/jBfmNGV).
How do I remove that blank cell after MEN cell?
CODE:
<!DOCTYPE html>
<html>
<body>
<table align="left" border="1" cellpadding="3" cellspacing="3">
<tbody>
<tr>
<td colspan="5">QUESTIONAIRE RESULTS</td>
</tr>
<tr>
<td rowspan="3">QUESTIONS</td>
<td colspan="2" rowspan="2">WOMEN</td>
<td colspan="2" rowspan="2">MEN</td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td>YES</td>
<td>NO</td>
<td>YES</td>
<td>NO</td>
</tr>
<tr>
<td>Question 1</td>
<td>42%</td>
<td>58%</td>
<td>61%</td>
<td>39%</td>
</tr>
<tr>
<td>Question 2</td>
<td>53%</td>
<td>47%</td>
<td>69%</td>
<td>31%</td>
</tr>
<tr>
<td>Question 3</td>
<td>26%</td>
<td>74%</td>
<td>51%</td>
<td>49%</td>
</tr>
<tr>
<td>Question 4</td>
<td>40%</td>
<td>60%</td>
<td>60%</td>
<td>40%</td>
</tr>
</tbody>
</table>
</body>
</html>

Just remove the :
<td> </td>
so your final code will be :
<!DOCTYPE html>
<html>
<body>
<table align="left" border="1" cellpadding="3" cellspacing="3">
<tbody>
<tr>
<td colspan="5">QUESTIONAIRE RESULTS</td>
</tr>
<tr>
<td rowspan="3">QUESTIONS</td>
<td colspan="2" rowspan="2">WOMEN</td>
<td colspan="2" rowspan="2">MEN</td>
</tr>
<tr>
</tr>
<tr>
<td>YES</td>
<td>NO</td>
<td>YES</td>
<td>NO</td>
</tr>
<tr>
<td>Question 1</td>
<td>42%</td>
<td>58%</td>
<td>61%</td>
<td>39%</td>
</tr>
<tr>
<td>Question 2</td>
<td>53%</td>
<td>47%</td>
<td>69%</td>
<td>31%</td>
</tr>
<tr>
<td>Question 3</td>
<td>26%</td>
<td>74%</td>
<td>51%</td>
<td>49%</td>
</tr>
<tr>
<td>Question 4</td>
<td>40%</td>
<td>60%</td>
<td>60%</td>
<td>40%</td>
</tr>
</tbody>
</table>
</body>
</html>
Preview: https://jsfiddle.net/3q6n9v7k/

A more correct answer would be the changing the rowspan and colspan.
Instead of
<tr>
<td rowspan="3">QUESTIONS</td> //
<td colspan="2" rowspan="2">WOMEN</td>
<td colspan="2" rowspan="2">MEN</td>
</tr>
Do this
<tr>
<td rowspan="2">QUESTIONS</td>
<td colspan="2" rowspan="1">WOMEN</td>
<td colspan="2" rowspan="1">MEN</td>
</tr>
Also remove :
<tr>
<td> </td>
</tr>
check out Fiddle

How to put table under another table

how can I put one table under another if I have used align for example.
center_table
left_table
desired_table
But I am getting following result
center_table
left_table desired_table
Here is my html code.
center_table
<table align="left">
<tr>
<td>left_table</td>
</tr>
</table>
<table align="center">
<tr>
<td>desired_table</td>
</tr>
</table>
Without using css only HTML

Just add a <div style = "clear:both;"></div> in between your two tables. It should work then
The clear property specifies which side(s) of an element other floating elements are not allowed.
You can find more detail of it here http://www.w3schools.com/cssref/pr_class_clear.asp
<table align="left">
<table align="left">
<tr>
<td>left_table</td>
</tr>
</table>
<div style="clear:both;"></div>
<table align="center">
<tr>
<td>desired_table</td>
</tr>
</table>
</table>
or
<table align="left">
<tr>
<td>left_table</td>
</tr>
</table>
<div style="clear:both;"></div>
<table align="center">
<tr>
<td>desired_table</td>
</tr>
</table>

For the left aligned table change the width to 100% and it will work.
<table align="center" >
<tr>
<td>left_table</td>
</tr>
</table>
<table align="left" width="100%">
<tr>
<td>left_table</td>
</tr>
</table>
<table align="center" >
<tr>
<td>desired_table</td>
</tr>
</table>

Result -> http://jsfiddle.net/0LtqL8yh/embedded/result/
<table border=1 width=80% height=30% align=left cellpadding=1 cellspacing=1>
<tr height=30%>
<td>First Row</td>
<td>First Row</td>
<td>First Row</td>
</tr>
<tr height=70%>
<td>Second Row</td>
<td>
<table bgcolor=yellow border=1 width=80% height=80% align="center">
<tr>
<td>Inner Table</td>
<td>Inner Table</td>
</tr>
<tr>
<td>Inner Table</td>
<td>Inner Table</td>
</tr>
</table>
</td>
<td>Second Row</td>
</tr>
</table>