I have been trying to create a table in bootstrap with lines of text in between rows, to delineate different groups in a table without having to duplicate the header and making multiple tables. Here is an example of what I have tried to do.
<div class="table-responsive">
<table class='table'>
<thead>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
</tbody>
<tr>
<td>
A sub-header introducing a different group of data.
</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
</table>
<h3>Another sub-header introducing a different group of data</h3>
<table class='table'>
<!-- Header is omitted -->
<tbody>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
</tbody>
</table>
</div>
Making a new table row and making the sub-header the first and only column of a row looks bad because text is compressed into this single column. I also tried to make a new table and just omit the header, replacing this with a header tag placed between the two tables. This resulted in the misalignment of all proceeding rows, since they had no header to align themselves to. All I want is a line of text I can insert between rows of a table without disturbing the structure of the table.
You have 3 columns in the row above, you need to have a colspan property:
A sub-header introducing a different group of data.
You need to use the same table, and use colspan to take several cases. <td colspan="2">blabla</td>
Try the HTML5 spec example for delineate different rows, via combining the use of <tbody>, <th scope="rowgroup">, <th scope="row">:
<table>
<caption>Measurement of legs and tails in Cats and English speakers</caption>
<thead>
<tr> <th> ID <th> Measurement <th> Average <th> Maximum
<tbody>
<tr> <td> <th scope=rowgroup> Cats <td> <td>
<tr> <td> 93 <th scope=row> Legs <td> 3.5 <td> 4
<tr> <td> 10 <th scope=row> Tails <td> 1 <td> 1
</tbody>
<tbody>
<tr> <td> <th scope=rowgroup> English speakers <td> <td>
<tr> <td> 32 <th scope=row> Legs <td> 2.67 <td> 4
<tr> <td> 35 <th scope=row> Tails <td> 0.33 <td> 1
</tbody>
</table>
Source: HTML5 spec, 4.9.10 The th element
Related
I have a table inside table in html as follows:
<table class="sortable draggable">
<thead>
<tr>
<th class="col-salesOrderId">Order Number</th>
<th class="col-orderDate">Date of Order</th>
<th class="col-party">Party</th>
<th class="col-edit">Edit</th>
<th class="col-delete">Delete</th>
</tr>
</thead>
<tbody>
{#orders}
<tr>
<td class="col-salesOrderId">{.salesOrderId}</td>
<td class="col-orderDate">{#formatDate date=orderDate format="DD-MM-YYYY" /}</td>
<td class="col-party">{.party.partyName}</td>
<td class="col-edit">
<button class="btn btn-info btn-edit">
</button>
</td>
<td class="col-delete">
<button class="btn btn-danger btn-delete">
</button>
</td>
</tr>
<tr>
<table class="sortable draggable row-details">
<thead>
<tr>
<th class="col-itemName">Item Name</th>
<th class="col-quantity">Quantity</th>
<th class="col-rate">Rate</th>
<th class="col-amount">Amount</th>
</tr>
</thead>
<tbody>
{#items}
<tr>
<td>{.item.itemName}</td>
<td>{.quantity}</td>
<td>{.rate}</td>
<td>{.quantity * .rate}</td>
</tr>
{/items}
</tbody>
</table>
</tr>
{/orders}
</tbody>
</table>
I get the output as shown below:
Why I get such an output? I expected to see nested tables.
Your HTML has several errors, starting with this:
{#orders}
As others have mentioned, this is also bad:
<tr>↩ <table class="sortable draggable row-details"
Do yourself a big favor and start using an HTML validator like W3C's. It will find problems like this quickly. (It will also find other things to complain about that you might not need to fix, but when it helps, it will save a lot of time.)
Also, start using the Chrome inspector to see what it's done when your markup goes haywire. In this case, you can see that Chrome closed your first table, instead of nesting it. When Chrome messes with your HTML like this, it's a sign you might have an error in that spot.
</tr></tbody></table>
{#items}
{/items}
<table class="sortable draggable row-details">
<thead>
<tr>
<th class="col-itemName">Item Name</th>
<th class="col-quantity">Quantity</th>
<table>
<tr>
<td> <!-- must be in td -->
<table> <!-- nested table -->
<tr>
<td>
</td>
</tr>
</table>
</td>
</tr>
</table>
your nested table need to be inside of td or th.
You need to nest the child <table> tag inside a <td> tag, not inside a <tr> tag. Doing this should make it display properly, as only a <td> or <th> tag can go directly inside a <tr> tag.
The <table> tag needs to be inside <td> or <th> tag for it to be nested. In your code, you have put the <table> tag as a child of <tr> tag which is wrong. It should be child of <td> or <th>.
Inserting <td> or <th> between <tr> and <table> will give the output correctly.
Here is working link for reference:
Nested Tables in HTML
Example:
<table border="1">
<thead>
<tr>
<th>Item 1
<th>Item 2
</tr>
</thead>
<tbody>
<tr>
<td>
<table border="1">
<tr>
<td>1
<td>2
</tr>
<tr>
<td>1
<td>2
</tr>
</table>
<td>A
</tr>
</tbody>
</table>
What is the term of this table arrangement?
and I want to make a like that using bootstrap, but I fail so many times.
(also I already google it)
that is why I am here to look someone know how to do it.
I assume you are specifically referring to the use of colspan to cover multiple columns with one cell and rowspan to cover multiple rows with one cell
<table>
<tr><td rowspan="2">FOO</td><td colspan="4">EXAMPLE</td></tr>
<tr><td>1</td><td>2</td><td>3</td><td>4</td></tr>
<tr><td>1. Something here</td><td></td><td></td><td></td><td></td></tr>
<tr><td>2. Something here</td><td></td><td></td><td></td><td></td></tr>
<tr><td>3. Something here</td><td></td><td></td><td></td><td></td></tr>
<tr><td>4. Something here</td><td></td><td></td><td></td><td></td></tr>
</table>
Try like this:
Demo
HTML:
<table class="table table-bordered">
<thead>
<tr>
<th rowspan="2">Heading</th>
<th rowspan="2">Heading</th>
<th colspan="4">Heading</th>
</tr>
<tr>
<th>Heading</th>
<th>Heading</th>
<th>Heading</th>
<th>SHeading</th>
</tr>
</thead>
<tbody>
<tr>
<td>3546 </td>
<td>89789</td>
<td>3546</td>
<td>789789</td>
<td>56456757</td>
<td>56456757</td>
</tr>
<tr>
<td>3546 </td>
<td>89789</td>
<td>3546</td>
<td>789789</td>
<td>56456757</td>
<td>56456757</td>
</tr>
<tr>
<td>3546 </td>
<td>89789</td>
<td>3546</td>
<td>789789</td>
<td>56456757</td>
<td>56456757</td>
</tr>
<tr>
<td>3546 </td>
<td>89789</td>
<td>3546</td>
<td>789789</td>
<td>56456757</td>
<td>56456757</td>
</tr>
</tbody>
I'm having a werid problem making a super simple table without any css mods.
The code is the following:
<table>
<tr>
<th>ID</th>
<th>Country</th>
<th>Count</th>
</tr>
<tr>
<td>2<td>
<td>ARGENTINA<td>
<td>7379<td>
</tr>
<tr>
<td>3<td>
<td>CHILE<td>
<td>6543<td>
</tr>
<tr>
<td>4<td>
<td>EGYPT<td>
<td>6512<td>
</tr>
</table>
I'm getting crasy in trying to find what's wrong in this super simple code about why is it that the table header's columns refuse to align with its respective values?
It seems that there's an extra ghost column being created.
Can anyone explain, please?
Your lines are missing the closing . You have where the closing tags should be.
<table>
<tr>
<th>ID</th>
<th>Country</th>
<th>Count</th>
</tr>
<tr>
<td>2</td>
<td>ARGENTINA</td>
<td>7379</td>
</tr>
<tr>
<td>3</td>
<td>CHILE</td>
<td>6543</td>
</tr>
<tr>
<td>4</td>
<td>EGYPT</td>
<td>6512</td>
</tr>
</table>
Your doesn't have a closing tag.
Try this:
<table>
<tr>
<th>ID</th>
<th>Country</th>
<th>Count</th>
</tr>
<tr>
<td>2</td>
<td>ARGENTINA</td>
<td>7379</td>
</tr>
<tr>
<td>3</td>
<td>CHILE</td>
<td>6543</td>
</tr>
<tr>
<td>4</td>
<td>EGYPT</td>
<td>6512</td>
</tr>
</table>
Then it looks like it tries to create closing tags for each... And as a result you are ending up with weird extra columns.
I am creating one html table but i am confused with
Can any one help me to create table like attached image with color combinations.
Thank You.
Try this code. You can change the color according to your choice
<table border="1" width="50%">
<tr style="background-color: #090">
<th>1</th>
<th>1</th>
<th>1</th>
<th>1</th>
</tr>
<tr style="background-color: #7aba7b">
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr style="background-color: #99BC99">
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
</table>
Some basic HTML stuff for tables:
<table> </table> = table tag
<tr> </tr> = row tag
<td> </td> = cell tag
So you put it all together like so:
<table>
<tr>
<td> cell content </td>
</tr>
</table>
Repeat rows and cells as needed. Then add some styling with some CSS or something. Now go try it!
Is it possible to lay out a table with 2 columns. The first column with many td's, the second one with only one?
Yes, use colspan...or you might want rowspan (colspan's opposite :))
Directly from the article (with enclosing the attributes in quotes:
<TABLE BORDER="2" CELLPADDING="4">
<TR> <TH COLSPAN="2">Production</TH> </TR>
<TR> <TD>Raha Mutisya</TD> <TD>1493</TD> </TR>
<TR> <TD>Shalom Buraka</TD> <TD>3829</TD> </TR>
<TR> <TD>Brandy Davis</TD> <TD>0283</TD> </TR>
<TR> <TH COLSPAN="2">Sales</TH> </TR>
<TR> <TD>Claire Horne</TD> <TD>4827</TD> </TR>
<TR> <TD>Bruce Eckel</TD> <TD>7246</TD> </TR>
<TR> <TD>Danny Zeman</TD> <TD>5689</TD> </TR>
</TABLE>
Here is the W3 article
yes use rowspan or colspan to merge td. Example:
<table>
<tr>
<td></td><td></td><td></td>
</tr>
<tr>
<td rowspan="3"></td>
</tr>
</table>