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>
Related
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>
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%;
}
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>
So I had an assignment but I cant really make such table:
You have to use rowspan and colspan to merge cells
<table>
<tr>
<th rowspan="2">Name<br></th>
<th rowspan="2">Course</th>
<th colspan="2">hours<br></th>
</tr>
<tr>
<td>credit</td>
<td>contact</td>
</tr>
<tr>
<td>aa</td>
<td>bb</td>
<td>1</td>
<td>2</td>
</tr>
<tr>
<td>cc</td>
<td>dd</td>
<td>3</td>
<td>4</td>
</tr>
</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.