I am trying to build the following HTML table with 3 header columns in <thead> and 5 rows in <tbody> with the 5 rows spanning the full length of the header.
<table>
<thead>
<th class="col-4">
Placeholder
</th>
<th class="col-5">
Placeholder
</th>
<th>
<button>
<em class="fa fa-trash-alt"></em>
</button>
</th>
</thead>
<tbody>
<tr>
<td><strong>Description: </strong></td>
</tr>
<tr>
<td><strong>Opportunities: </strong></td>
</tr>
<tr>
<td><strong>Risks: </strong></td>
</tr>
<tr>
<td><strong>Dependencies: </strong></td>
</tr>
</tbody>
</table>
I thought of doing it using the colspan attribute of my <td> element, however my IDE underlines the attribute in the SCSS file saying it is unknown attribute.
Related
I am trying to print key in center of values.so that I tried to use rowspan but it's repeating n times.
here is my code
<table >
<tbody ng-repeat="(key,value) in values1" >
<tr >
<th translate> Heading 1</th>
<th translate> Heading 2 </th>
<th translate> Heading 3 </th>
<th translate> Heading 4 </th>
</tr>
<tr ng-repeat="itr in value">
<td >
{{itr .value1}}
</td>
<td >
{{itr .value2}}
</td>
<td >
{{itr .value3}}
</td>
<td rowspan="{{value.length+1}}" >
{{key}}
</td>
</tr>
</tbody>
</table>
But I am getting like this.
I need in this format
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 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>
I already have a properly formatted table with a tbody thoroughly arranged with the theads. however I missed something. in a name column in the tbody, i need to divide it in half, one is a smaller box containing a number and a bigger box containing the name.
so before it's something like:
td [name here] td
into something like
td td[number] td td [name here] td td
the two should be under 1 column in the header which is a name.
any thoughts?
here is the thead:
<thead>
<tr class="table1row">
<th ROWSPAN="4"> SEQ # </th>
<th ROWSPAN="4" class="table1name"> NAME </th>
<th ROWSPAN="2" COLSPAN="4" class="table1loa" > LOA </th>
<th COLSPAN="4"> TARDINESS/UNDERTIME </th>
<tr>
<tr>
<th ROWSPAN="1" COLSPAN="3"> No. of Working Days </th>
<th ROWSPAN="2" COLSPAN="1" class="table1ex"> Period Covered </th>
<th ROWSPAN="1" COLSPAN="2"> FREQUENCY </th>
<th ROWSPAN="1" COLSPAN="2"> TOTAL </th>
</tr>
<tr>
<th> <small>VL</small> </th>
<th> <small>SL</small> </th>
<th> <small>OtherS/*</small> </th>
<th> Tardiness </th>
<th> Undertime </th>
<th> Hrs </th>
<th> Min </th>
</tr>
</thead>
You can add a table inside td. so, the tbody would comes like the following. you can style the table inside td to avoid cellspacing and cellpadding to 0.
<tbody>
<tr class="table1row">
<td ROWSPAN="4"> SEQ # </td>
<td ROWSPAN="4" class="table1name">
<table>
<tr>
<td>name</td>
<td>number</td>
</tr>
</table>
</td>
<td ROWSPAN="2" COLSPAN="4" class="table1loa" > LOA </td>
<td COLSPAN="4"> TARDINESS/UNDERTIME </td>
</tr>
<tr>
....
</tr>
<tr>
.....
</tr>
</tbody>
Note: You forgot to close the first tr in the <thead>.
is it what you need..?
<table border="1">
<tr>
<th colspan="2">Title</th>
</tr>
<tr>
<td width250px>No.</td>
<td width=100px>Name</td>
</tr>
</table>
...
I am trying to shrink one cell in the table, but it refuses to shring..here is my table.
<table cellspacing="0" style="position: absolute;width: 990px;margin-left: 8px;" align="center">
<thead>
<tr class='no-wrap'>
<th width="20%"></th>
<th width="10%">Our Rating</th>
<th width="10%">Users' Rating</th>
<th width="30%">Review</th>
<th width="30%">Price</th>
</tr>
</thead>
<tbody>
<tr>
<td width="20%"></td>
<td width="10%">Our Rating</td>
<td width="10%">Users' Rating</td>
<td width="30%">Review</th>
<td width="30%">Price</td>
</tr>
</tbody>
</table>
The problem is that the review part doesnt shrink..even when I give it a lower percentage..why is that?
You have incorrect HTML syntax.
You need to wrap your table row elements in tr:
<tbody>
<tr>
<td></td>...
</tr>
</tbody>
Also you have a </th> where you should have a <td> on your 2nd row, 4th cell (Review):
<td width="30%">Review</th>