Multiple rows in td - html

Stores <td> contain table with mulitple rows. A store can have mulitple
stores (rows).
See Example: https://jsfiddle.net/ak3wtkak/1/
The width of Stores and Quantity (<th>) columns should be same for mulitple rows on the second table. How to fix this or what is alternative approach?
<table border="1" width="100%">
<thead>
<tr>
<th style="width:300px">Product</th>
<th>Barcode</th>
<th>Stores</th>
<th class="middle">Quantity</th>
</tr>
</thead>
<tbody>
<tr>
<td>
Item 1
</td>
<td>12345</td>
<td colspan="3">
<table border="1" width="100%">
<tbody>
<tr>
<td>Store Name 1</td>
<td class="middle">4</td>
</tr>
<tr>
<td>Store Name 2</td>
<td class="middle">4</td>
</tr>
<tr>
<td>Store Name 3</td>
<td class="middle">4</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>


You have to use rowspan.
Make the first 2 rows with rowspan of 3.
<table border="1" width="100%">
<thead>
<tr>
<th style="width:300px">Product</th>
<th>Barcode</th>
<th>Stores</th>
<th class="middle">Quantity</th>
</tr>
</thead>
<tbody>
<tr>
<td rowspan="3">Item 1</td>
<td rowspan="3">12345</td>
<td>Store Name 1</td>
<td>4</td>
</tr>
<tr>
<td>Store Name 2</td>
<td>4</td>
</tr>
<tr>
<td>Store Name 3</td>
<td>4</td>
</tr>
</tbody>
</table>

Related

jQuery prepend tr after tr heading

I have the following HTML table.
<table id="table">
<tbody>
<tr>
<th>City</th>
</tr>
<tr>
<td>Madrid</td>
</tr>
<tr class="show-on-top">
<td data-order="3">London</td>
</tr>
<tr>
<td>Berlin</td>
</tr>
<tr>
<td data-order="1">Paris</td>
</tr>
<tr class="show-on-top">
<td data-order="2">Rome</td>
</tr>
</tbody>
London, Paris and Rome have a class named show-on-top. As the name suggests I want to move all tr with show-on-top on top of the table. I can do that with the following code.
$("#table tbody").prepend($('.show-on-top'));
But the problem is that London, Paris and Rome are shown before <th> (the "City" heading). Of course I want to place show-on-top rows on top of the table but after heading (first row). So I came up with the following idea.
$("#table tbody tr:eq(1)").prepend($('.show-on-top'));
I'm almost there. All my show-on-top are placed after heading but they're nested inside a tr like follows.
<table id="table">
<tbody>
<tr>
<th>City</th>
</tr>
<tr>
<tr class="show-on-top">
<td data-order="3">London</td>
</tr>
<tr>
<td data-order="1">Paris</td>
</tr>
<tr class="show-on-top">
<td data-order="2">Rome</td>
</tr>
</tr>
<tr>
<td>Madrid</td>
</tr>
<tr>
<td>Berlin</td>
</tr>
</tbody>
I can't understand how the heck all my rows are nested inside a tr. I'm tried with hundreds of combinations of parent, after, prepend, append with no success.
Bonus question. show-on-top rows have data-order attribute that represents the order I want to sort th rows in question (Paris > Rome > London). I used sort.data('order') but nothing happens. I can't even see anything in console.log().
Thank you for your time.

One thing you can do is move the heading rows out of <tbody> into <thead>
$("#table tbody").prepend($('.show-on-top'));
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="table">
<thead>
<tr>
<th>City</th>
</tr>
</thead>
<tbody>
<tr>
<td>Madrid</td>
</tr>
<tr class="show-on-top">
<td data-order="3">London</td>
</tr>
<tr>
<td>Berlin</td>
</tr>
<tr>
<td data-order="1">Paris</td>
</tr>
<tr class="show-on-top">
<td data-order="2">Rome</td>
</tr>
</tbody>
</table>
Another solution is to use .after() to put the rows after the last row containing th.
$("#table tbody tr:has(th):last").after($(".show-on-top"));
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="table">
<tbody>
<tr>
<th>City</th>
</tr>
<tr>
<td>Madrid</td>
</tr>
<tr class="show-on-top">
<td data-order="3">London</td>
</tr>
<tr>
<td>Berlin</td>
</tr>
<tr>
<td data-order="1">Paris</td>
</tr>
<tr class="show-on-top">
<td data-order="2">Rome</td>
</tr>
</tbody>
</table>

You could use insertAfter() and :first selector
$(".show-on-top").insertAfter('#table tbody tr:first');
.show-on-top{ color:red}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="table">
<tbody>
<tr>
<th>City</th>
</tr>
<tr>
<td>Madrid</td>
</tr>
<tr class="show-on-top">
<td data-order="3">London</td>
</tr>
<tr>
<td>Berlin</td>
</tr>
<tr>
<td data-order="1">Paris</td>
</tr>
<tr class="show-on-top">
<td data-order="2">Rome</td>
</tr>
</tbody>
</table>

Wrong usage of th tag

We just wrote a basic html code but it gives one outputs when th is used and gives and another output when tr is used
This is the actual output (with tr)
<table width="100%">
<tr>
<td align="center" width="50%"><b>FIRST DEGREE PROGRAMMES (AIDED PROGRAMMES)</b></td>
<td align="center" width="50%"><b>FIRST DEGREE PROGRAMMES (UNAIDED PROGRAMMES)</b></td>
</tr>
<tr>
<td valign="top">
<table border="1" style=" border-collapse: collapse;">
<tr>
<th width="5%">No</th>
<th width="10%">DEGREE</th>
<th width="30%">PROGRAMME</th>
<th width="55%">COMPLEMENTARY COURSE</th>
</tr>
<tr>
<td>1</td>
<td>B.Sc</td>
<td>Botany & Biotechnology</td>
<td>1. Biochemistry</td>
</tr>
<tr>
<td>2</td>
<td>B.Com</td>
<td>Commerce</td>
<td>1. Finance/Computer Applications/Co-operation (Electives)</td>
</tr>
</table>
</td>
<td valign="top">
<table border="1" style=" border-collapse: collapse;">
<tr>
<th width="5%">No</th>
<th width="10%">DEGREE</th>
<th width="30%">PROGRAMME</th>
<th width="55%">COMPLEMENTARY COURSE</th>
</tr>
<tr>
<td>1</td>
<td>B.Com</td>
<td>Commerce</td>
<td>1. Finance (Electives)</td>
</tr>
<tr>
<td>2</td>
<td>B.Com</td>
<td>B.Com Accounts & Audit (Self Financing) </td>
<td>1. Accounts & Audit (Electives)</td>
</tr>
</table>
</td>
</tr>
</table>
This is the confusing output (with th)
<table width="100%">
<th>
<td align="center" width="50%"><b>FIRST DEGREE PROGRAMMES (AIDED PROGRAMMES)</b></td>
<td align="center" width="50%"><b>FIRST DEGREE PROGRAMMES (UNAIDED PROGRAMMES)</b></td>
</th>
<tr>
<td valign="top">
<table border="1" style=" border-collapse: collapse;">
<tr>
<th width="5%">No</th>
<th width="10%">DEGREE</th>
<th width="30%">PROGRAMME</th>
<th width="55%">COMPLEMENTARY COURSE</th>
</tr>
<tr>
<td>1</td>
<td>B.Sc</td>
<td>Botany & Biotechnology</td>
<td>1. Biochemistry</td>
</tr>
<tr>
<td>2</td>
<td>B.Com</td>
<td>Commerce</td>
<td>1. Finance/Computer Applications/Co-operation (Electives)</td>
</tr>
</table>
</td>
<td valign="top">
<table border="1" style=" border-collapse: collapse;">
<tr>
<th width="5%">No</th>
<th width="10%">DEGREE</th>
<th width="30%">PROGRAMME</th>
<th width="55%">COMPLEMENTARY COURSE</th>
</tr>
<tr>
<td>1</td>
<td>B.Com</td>
<td>Commerce</td>
<td>1. Finance (Electives)</td>
</tr>
<tr>
<td>2</td>
<td>B.Com</td>
<td>B.Com Accounts & Audit (Self Financing) </td>
<td>1. Accounts & Audit (Electives)</td>
</tr>
</table>
</td>
</tr>
</table>
We are confused why there is an extra td coming when we use th for main table. If you are viewing using a UC Browser, you can simply press Ctrl button and click on the browser output which will give you the actual table layout. So in first output there will only two tds and for second output there will be three td's.

This is because <th> is a table cell. Including table cells (<td>) inside table cells (<th>) will give you unexpected results. What you are looking for is <thead>: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/thead
As a boilerplate, you can define tables as below:
<table>
<!-- header -->
<thead>
<tr>
<th>Header content 1</th>
<th>Header content 2</th>
</tr>
</thead>
<!-- body -->
<tbody>
<tr>
<td>Body content 1</td>
<td>Body content 2</td>
</tr>
</tbody>
</table>

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>

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 make one <td> span both columns in a two column table?

How can I create a table like the above example in HTML and CSS.
I've tried the following:
<table>
<tr>
<td style="width:50%">TEXT</td>
<td style="width:50%">TEXT</td>
</tr>
<tr>
<td style="width:100%">TEXT</td>
</tr>
but it won't work. Can anyone help?

You should use colspan for your second row. Like this :
<table>
<tr>
<td style="width:50%">TEXT</td>
<td style="width:50%">TEXT</td>
</tr>
<tr>
<td colspan="2" style="width:100%">TEXT</td>
</tr>
...
</table>
For learn -> HTML Colspan

<td>s have a colspan attribute that determine how many columns it should span over. You example has 2 columns to span, so your cleaned up code would look like this:
<table>
<tr>
<td width="50%"></td>
<td width="50%"></td>
</tr>
<tr>
<td width="50%"></td>
<td width="50%"></td>
</tr>
<tr>
<!-- The important part is here -->
<td colspan="2">This will have 100% width by default</td>
</tr>
<tr>
<td width="50%"></td>
<td width="50%"></td>
</tr>
<tr>
<td width="50%"></td>
<td width="50%"></td>
</tr>
</table>

<table border="1">
<tr>
<th>Column 1</th>
<th>Column 2</th>
</tr>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
</tr>
<tr>
<td colspan="2">Cell 3 (Two columns)</td>
</tr>
</table>
colspan will help you. Link to more info.