Nested ( master detail ) table in html - html

I added child table in tr but I am unable to make a grid like shown in mockup.
Basically, I got the idea from dev extreme grid. https://js.devexpress.com/Demos/WidgetsGallery/Demo/DataGrid/MasterDetailView/Angular/Light/


You should be able to use further <tr>, <td>, <th> elements to do what you need, since it seems like you want to keep the same table layout for the pseudo-child-tables:
<table>
<thead>
<tr>
<th>Teader Id</th>
<th>Name</th>
<th>address</th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>ABC</td>
<td>32 block</td>
<td></td>
</tr>
<tr>
<th></th>
<th>Student Id</th>
<th>Name</th>
<th>Gender</th>
</tr>
<tr>
<td></td>
<td>11</td>
<td>DEF</td>
<td>Male</td>
</tr>
<tr>
<td>2</td>
<td>GHI</td>
<td>32 block</td>
<td></td>
</tr>
<tr>
<th></th>
<th>Student Id</th>
<th>Name</th>
<th>Gender</th>
</tr>
<tr>
<td></td>
<td>12</td>
<td>JKL</td>
<td>Male</td>
</tr>
<tr>
<td>3</td>
<td>MNO</td>
<td>32 block</td>
<td></td>
</tr>
<tr>
<th></th>
<th>Student Id</th>
<th>Name</th>
<th>Gender</th>
</tr>
<tr>
<td></td>
<td>11</td>
<td>PQR</td>
<td>Male</td>
</tr>
</tbody>
</table>

Related

Booststrap table insert break after modulus

What should I change in my code in order to have only 3 columns?
<table class="table">
<thead class="thead-light">
<tr>
<th scope="col">Start</th>
<th scope="col">Type</th>
<th scope="col">Title</th>
</tr>
<td>11</td>
<td>12</td>
<td>13</td>
<td>21</td>
<td>22</td>
<td>23</td>
<td>31</td>
<td>32</td>
<td>33</td>
</thead>
</table>
edit: here is the real code (data from Django). I dont know in advance the number of rows.
{% for pi, coll in items %}
<strong>{{pi}}</strong>
<table class="table">
<thead class="thead-light">
<tr>
<th scope="col">Start</th>
<th scope="col">Type</th>
<th scope="col">Title</th>
</tr>
{% for element in coll %}
<td>{{element.Collocation.StartDate}} at {{element.Collocation.StartTime}}</td>
<td>{{element.Type}}</td>
<td> {{element.Title}}</td>
{% endfor %}
</thead>
</table>
This is what I have

You need to have tag for each row.
The tag defines a row in an HTML table.
Reference : https://www.w3schools.com/html/html_tables.asp
<table class="table">
<thead class="thead-light">
<tr>
<th scope="col">Start</th>
<th scope="col">Type</th>
<th scope="col">Title</th>
</tr>
</thead>
<tbody>
<tr>
<td>11</td>
<td>12</td>
<td>13</td>
</tr>
<tr>
<td>21</td>
<td>22</td>
<td>23</td>
</tr>
<tr>
<td>31</td>
<td>32</td>
<td>33</td>
</tr>
</tbody>
</table>
Dynamic Rows for the Table
<?php foreach($rows as $row): ?>
<tr>
<td><?=$row['Price'];?></td>
<td><?=$row['Year'];?></td>
<td><?=$row['Value'];?></td>
</tr>
<?php endforeach;?>

Please Add this kind of structure.
<table class="table">
<thead class="thead-light">
<tr>
<th scope="col">Start</th>
<th scope="col">Type</th>
<th scope="col">Title</th>
</tr>
</thead>
<tbody>
<tr>
<td>11</td>
<td>12</td>
<td>13</td>
</tr>
<tr>
<td>21</td>
<td>22</td>
<td>23</td>
</tr>
<tr>
<td>31</td>
<td>32</td>
<td>33</td>
</tr>
</tbody>
</table>

<table class="table">
<thead class="thead-light">
<tr>
<th scope="col">Start</th>
<th scope="col">Type</th>
<th scope="col">Title</th>
</tr>
</thead>
<tbody>
<tr>
<td>11</td>
<td>12</td>
<td>13</td>
</tr>
</tbody>
</table>
I think this should work check it out.

Make TH equals to 3 columns in HTML

Hello, I want to make ACTIONS equal to three columns
As shown in image, I want ACTIONS in center of Detail Update Delete
Please help.

<table border=1>
<tr>
<th>NAME</th>
<th>AGE</th>
<th colspan="3">ACTIONS</th>
</tr>
<tr>
<td>Salman Mushtaq</td>
<td>27</td>
<td>Detail</td>
<td>Update</td>
<td>Delete</td>
</tr>
<tr>
<td>Muhanmmad Awais</td>
<td>32</td>
<td>Detail</td>
<td>Update</td>
<td>Delete</td>
</tr>
</tr>
<tr>
<td>Imran Hassan</td>
<td>38</td>
<td>Detail</td>
<td>Update</td>
<td>Delete</td>
</tr>
</tr>
<tr>
<td>Muhammad Asad</td>
<td>33</td>
<td>Detail</td>
<td>Update</td>
<td>Delete</td>
</tr>
</table>
Try to search about colspan and rowspan

Use colspan attribute in TH tag (ie. colspan="3")
<table border="1">
<thead>
<tr>
<th>Name</th>
<th>Age</th>
<th colspan="3">Action (spanned 3 cols)</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>2</td>
<td>action 1</td>
<td>Action 2</td>
<td>Action 3</td>
</tr>
</tbody>
</table>

Merge columns into single cell

I create a table and what I want is to merge some cells in the last row to show the total or summary. I tried to put some CSS but it didn't work.
this the table I have.
<table class="table table-bordered">
<thead>
<tr>
<th>Class</th>
<th>A</th>
<th>B</th>
<th>Total</th>
</tr>
</thead>
<tr>
<td>1</td>
<td>25</td>
<td>27</td>
<td>52</td>
</tr>
<tr>
<td>2</td>
<td>24</td>
<td>26</td>
<td>50</td>
</tr>
<tr>
<!-- merge -->
<td></td>
<td></td>
<td>Total</td>
<!-- merge -->
<td>102</td>
</tr>
</table>
what I want is to merge the first 3 in the last row
how can I do that?
thanks!

You could use colspan to specify which cells that you would like combined.
<table class="table table-bordered">
<thead>
<tr>
<th>Class</th>
<th>A</th>
<th>B</th>
<th>Total</th>
</tr>
</thead>
<tr>
<td>1</td>
<td>25</td>
<td>27</td>
<td>52</td>
</tr>
<tr>
<td>2</td>
<td>24</td>
<td>26</td>
<td>50</td>
</tr>
<tr>
<td colspan="3">Total</td>
<td>102</td>
</tr>
</table>

I think it would be:
<td colspan="3"> This is Bigger! </td>
That is merging horizontally.
If you want to merge vertically, you would have to say
<th rowspan="2"> This is also bigger, but different! </th>

how to properly insert <div> with <tr> inside a table?

I've searched online and I can't find an answer, so I'm going to ask this question.
The new data will always be formatted in the following and will be populated in id="content"
<tr>
<td>name</td>
<td>age</td>
<td>gender</td>
</tr>
I read you need to have <div> inside a <td> if you're going to put <div> inside a <table>. Right now, the format is not correct. All of the new data are in column one instead of each of them in each row.
<table>
<tr>
<th>name</th>
<th>age</th>
<th>gender</th>
</tr>
<td>
<div id="contents">
<tr>
<td>John</td>
<td>12</td>
<td>male</td>
</tr>
<tr>
<td>Jess</td>
<td>13</td>
<td>female</td>
</tr>
</div>
<td>
</table>

Update
re-reading your structure you most likely need
<table>
<thead>
<tr>
<th>name</th>
<th>age</th>
<th>gender</th>
</tr>
</thead>
<tbody id="contents">
<tr>
<td>John</td>
<td>12</td>
<td>male</td>
</tr>
<tr>
<td>Jess</td>
<td>13</td>
<td>female</td>
</tr>
</tbody>
</table>
Original answer
You can't have tr as direct children of a div.
You need to use a table
Either
<table>
<tr>
<th>name</th>
<th>age</th>
<th>gender</th>
</tr>
<td>
<table id="contents">
<tr>
<td>John</td>
<td>12</td>
<td>male</td>
</tr>
<tr>
<td>Jess</td>
<td>13</td>
<td>female</td>
</tr>
</table>
<td>
</table>
or
<table>
<tr>
<th>name</th>
<th>age</th>
<th>gender</th>
</tr>
<td>
<div id="contents">
<table>
<tr>
<td>John</td>
<td>12</td>
<td>male</td>
</tr>
<tr>
<td>Jess</td>
<td>13</td>
<td>female</td>
</tr>
</table>
</div>
<td>
</table>

I think that you want the table to be inside the div completely, and all the new data be in a corresponding row, like this:
<div id="contents">
<table>
<tr>
<th>name</th>
<th>age</th>
<th>gender</th>
</tr>
<tr>
<td>John</td>
<td>12</td>
<td>male</td>
</tr>
<tr>
<td>Jess</td>
<td>13</td>
<td>female</td>
</tr>
</table>
</div>
Right now the format is wrong because of you are trying to add whole data into a single cell (<td> element) which isn't right way to do.

It is possible to make a vertical table with horizontal headers?

I'm trying to create a vertical table, with headers on specific areas such as a user's address. I want to create something like this:
General Information
Name John Smith
Date of Birth April 1, 1984
Gender Male
Account Information
Correspondence Address
Address 1 1234 MLK Blvd
Address 2 502
City Kansas City
State Missouri
Country USA
Zip Code 55748
Residential Address
Address 1 143 St Michael's Way
Address 2
City Independence
State Missouri
Country USA
Zip Code 55760
I am currently using this code for the table without headers:
<table>
<tr id='Name'>
<th>Name</th>
</tr>
<tr id='PersonEmail'>
<th>Email</th>
</tr>
<tr id='Gender'>
<th>Gender</th>
<td></td>
</tr>
<tr id='Date_of_Birth'>
<th>Date of Birth</th>
<td></td>
</tr>
</table>
How do I add headers at the top of the table?

give colspan as a desired value to occupy the position as headers
<table>
<tr>
<td colspan='2'>General Information</td>
</tr>
<tr >
<td >Name </td>
<td > John Smith </td>
</tr>
<tr>
<td >Date of Birth</td>
<td > April 1, 1984</td>
</tr>
</table>

demo here, code here:
<table border="1">
<tr>
<th colspan="2">Header</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$100</td>
</tr>
<tr>
<th colspan="2">Header2</th>
</tr>
</table>

<table>
<tr><td colspan="2">Title 1</td></tr>
<tr id='Name'>
<th>Name</th>
</tr>
<tr><td colspan="2">Title 2</td></tr>
<tr id='PersonEmail'>
<th>Email</th>
</tr>
...
</table>

<table>
<tr>
<td></td>
<td colspan="2">General Information</td>
</tr>
<tr id='Name'>
<th>Name</th>
<td></td>
</tr>
<tr id='PersonEmail'>
<th>Email</th>
<td></td>
</tr>
<tr id='Gender'>
<th>Gender</th>
<td></td>
<td></td>
</tr>
<tr id='Date_of_Birth'>
<th>Date of Birth</th>
<td></td>
</tr>

It's just a case of rearranging the <td>'s and <th>'s
Table headers (or "captions") are simply an extra tag.
Option 1: (traditional)
<table>
<caption>General Information</caption>
<tr>
<th>Name</th>
<td>John Smith</td>
</tr>
<tr>
<th>Date of Birth</th>
<td>April 1, 1984</td>
</tr>
<tr>
<th>Gender</th>
<td>Male</td>
</tr>
</table>
<table>
<caption>Account Information</caption>
</table>
<table>
<caption>Correspondence Address</caption>
<tr>
<th>Address 1</th>
<td>1234 MLK Blvd</td>
</tr>
<tr>
<th>Address 2</th>
<td>502</td>
</tr>
<tr>
<th>City</th>
<td>Kansas City</td>
</tr>
<tr>
<th>State</th>
<td>Missouri</td>
</tr>
<tr>
<th>Country</th>
<td>USA</td>
</tr>
<tr>
<th>Zip Code</th>
<td>55748</td>
</tr>
</table>
<table>
<caption>Residential Address</caption>
<tr>
<th>Address 1</th>
<td>143 St Michael's Way</td>
</tr>
<tr>
<th>Address 2</th>
<td></td>
</tr>
<tr>
<th>City</th>
<td>Independence</td>
</tr>
<tr>
<th>State</th>
<td>Missouri</td>
</tr>
<tr>
<th>Country</th>
<td>USA</td>
</tr>
<tr>
<th>Zip Code</th>
<td>55760</td>
</tr>
</table>
Option 2: (Using additional tr as a sub-header)
<table>
<tr>
<th colspan="2" class="caption">General information</th>
</tr>
<tr>
<th>Name</th>
<td>John Smith</td>
</tr>
<tr>
<th>Date of Birth</th>
<td>April 1, 1984</td>
</tr>
<tr>
<th>Gender</th>
<td>Male</td>
</tr>
<tr>
<th colspan="2" class="caption">Account Information</th>
</tr>
<tr>
<!-- Account Info -->
</tr>
<tr>
<th colspan="2" class="caption">Correspondence Address</th>
</tr>
<tr>
<th>Address 1</th>
<td>1234 MLK Blvd</td>
</tr>
<tr>
<th>Address 2</th>
<td>502</td>
</tr>
<tr>
<th>City</th>
<td>Kansas City</td>
</tr>
<tr>
<th>State</th>
<td>Missouri</td>
</tr>
<tr>
<th>Country</th>
<td>USA</td>
</tr>
<tr>
<th>Zip Code</th>
<td>55748</td>
</tr>
<tr>
<th colspan="2" class="caption">Residential Address</th>
</tr>
<tr>
<th>Address 1</th>
<td>143 St Michael's Way</td>
</tr>
<tr>
<th>Address 2</th>
<td></td>
</tr>
<tr>
<th>City</th>
<td>Independence</td>
</tr>
<tr>
<th>State</th>
<td>Missouri</td>
</tr>
<tr>
<th>Country</th>
<td>USA</td>
</tr>
<tr>
<th>Zip Code</th>
<td>55760</td>
</tr>
</table>