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>
Related
I have a problem with my code specialy with the colspan part. Here is my code:
<table>
<tr>
<th>Phasen Name</th>
<th>Planned Value</th>
<th>Actual Cost</th>
<th>Earned Value</th>
</tr>
<th:block th:each="eintrag : ${evaPhasen}">
<tr>
<td class="accordion" th:text="${eintrag.key}"></td>
<td th:text="${eintrag.value.getPlannedValue()}"></td>
<td th:text="${eintrag.value.getActualCost()}"></td>
<td th:text="${eintrag.value.getEarnedValue()}"></td>
</tr>
<tr style="display:none">
<td colspan="4">
<table>
<tr>
<th>Workpackage Name</th>
<th>Planned Value</th>
<th>Actual Cost</th>
<th>Earned Value</th>
</tr>
<tr th:each="wpDetail : ${evaWP}">
<td class="accordion" th:text="${wpDetail.key}"></td>
<td th:text="${wpDetail.value.getPlannedValue()}"></td>
<td th:text="${wpDetail.value.getActualCost()}"></td>
<td th:text="${wpDetail.value.getEarnedValue()}"></td>
</tr>
</table>
</td>
</tr>
</th:block>
</table>
So my question is when I open the accordion class, the content (table) is showed in the first column of the other table and why not over all 4 columns? I think I'm doing something wrong with the . Here is a picture of the result [colspan]: http://thumbs.picr.de/32846430ew.jpg
I'm not familiar with thymeleaf, but I'm assuming it doesn't alter the table code you have here, it just styles it, or injects content.
So you have a table. It starts with a row with 4 th elements. Then you have a th element outside a row, which contains a row with 4 td elements. I believe maybe you meant to use a thead. But then you wouldn't need the tr elements within it. If I'm not mistaken, you're incorrectly nesting row-type elements and cell-type elements.
Also, the td element with the accordion class is empty. That might be
I can't offer much more without knowing thymeleaf, but your table output maybe should look something like this (it at least achieves the colspan working as intended):
<table>
<thead>
<th>Phasen Name</th>
<th>Planned Value</th>
<th>Actual Cost</th>
<th>Earned Value</th>
</thead>
<tr>
<td class="accordion" th:text="${eintrag.key}"></td>
<td th:text="${eintrag.value.getPlannedValue()}"></td>
<td th:text="${eintrag.value.getActualCost()}"></td>
<td th:text="${eintrag.value.getEarnedValue()}"></td>
</tr>
<tr>
<td colspan="4">
<table>
<tr>
<th>Workpackage Name</th>
<th>Planned Value</th>
<th>Actual Cost</th>
<th>Earned Value</th>
</tr>
<tr th:each="wpDetail : ${evaWP}">
<td class="accordion" th:text="${wpDetail.key}"></td>
<td th:text="${wpDetail.value.getPlannedValue()}"></td>
<td th:text="${wpDetail.value.getActualCost()}"></td>
<td th:text="${wpDetail.value.getEarnedValue()}"></td>
</tr>
</table>
</td>
</tr>
</table>
That being said, that th I removed looks like it could be an each. If it is an iterator, then you may need to have it iterate in a different spot. If you can paste the actual HTML output of your code after the thymeleaf templating is applied, it would much easier for a wider audience to help you.
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>
I have following table structure
<table>
<table>
<thead>
<tr>...header template...</tr>
</thead>
</table>
<tbody>
<tr> ... </tr>
<tr> ... </tr>
<tr> ... </tr>
</tbody>
<table>
My problem is that the datarows and header rows are not aligned to each other.
The table structure looks wierd.
Any clue how can i make them aligned.
Edit:
I have used Jqgrid to populate my grid.
The table structure which jqgrid produces is like the above one.
If i dont wrap within tag, then the first inside disappears.
Somewhere i found that jquery.clean will clean up if we dont wrap within table.
do u guys have any idea on this
You have so much syntax errors.
This is normal table:
<table border=1>
<thead>
<tr><th>header template</th></tr>
</thead>
<tbody>
<tr><td>...</td></tr>
<tr><td>...</td></tr>
</tbody>
</table>
A table have head and body and each can have rows and columns:
<table>
<thead>
<tr><td></td></tr>
</thead>
<tbody>
<tr><td></td></tr>
</tbody>
<table>
You can also see following link for more details.
Cheers !!
Try using a syntax like this:
<table>
<thead>
<tr>
<th colspan="2"> ...header template... </th>
</tr>
</thead>
<tbody>
<tr>
<td> ... </td>
<td> ... </td>
</tr>
<tr>
<td> ... </td>
<td> ... </td>
</tr>
</tbody>
</table>
I am not really sure if there is a way to do this, and as of now I am thinking I will just make a separate element with absolute positioning and place it in the proper position.
This is what I would like to do with the table... Is it even possible? Right now I have the table that you can see part of to the right, but I was just trying to think of a way to do this.
I have a normal table layout as of now: But take a look at the fiddle: http://jsfiddle.net/W3Tvm/
I guess the main challenge will be trying to keep the border-radius
<table class="overviewTable">
<thead>
<tr>
<th colspan="5">
FAN FREE TERMINALS</th>
</tr>
</thead>
<thead class="posiOverviewPN">
<tr>
<th class="txHeader">
TX4200E</th>
<th class="ksHeader">
KS6700</th>
<th class="ksHeader">
KS7200</th>
<th class="ksHeader">
KS7500</th>
<th class="ksHeader">
KS7700</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<img height="68px" src="../posiflex/images/tx-4200.png" width="120px"></td>
<td>
<img height="108px" src="../posiflex/images/ks6700.png" width="120px"></td>
<td>
<img height="109px" src="../posiflex/images/ks7200.png" width="120px"></td>
<td>
<img height="117px" src="../posiflex/images/ks7500.png" width="120px"></td>
<td>
<img height="119px" src="../posiflex/images/ks7700.png" width="120px"></td>
</tr>
</tbody>
</table>
I believe what you are wanting to do is basic table structuring: http://jsfiddle.net/9VULt/
All you need to do is have empty th/td cells:
<table>
<thead>
<tr>
<th><!--empty--></th>
<th>TX42</th>
</tr>
<tr>
<th><!--empty--></th>
<th>image</th>
</tr>
</thead>
<tbody>
<tr>
<td>Advantage</td>
<td>Industrial grade...</td>
</tr>
</tbody>
</table>
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>