<html>
<body>
<TABLE border="1" ">
<CAPTION><EM>A test table with merged cells</EM></CAPTION>
<TR><TH rowspan="2"><TH colspan="2"> Average
<TH rowspan="2">Red<BR>eyes </TH>
</TR>
<TR>
<TH>height</TH><TH>weight</TH>
</TR>
<TR>
<TD>1.9<TD>0.003<TD>40%</TD>
</TR>
<TR>
<TD>1.7<TD>0.002<TD>43%</TD>
</TR>
</TABLE>
</body>
</html>
I'm getting the output with first element of header as blank
A test table with merged cells
/-----------------------------------------\
| | Average | Red |
| |-------------------| eyes |
| | height | weight | |
|-----------------------------------------|
| 1.9 | 0.003 | 40% | |
|-----------------------------------------|
| 1.7 | 0.002 | 43% | |
\-----------------------------------------/
Expected output
A test table with merged cells
/----------------------------- \
| Average | Red |
|-------------------| eyes |
| height | weight | |
|------------------------------|
| 1.9 | 0.003 | 40% |
|------------------------------|
| 1.7 | 0.002 | 43% |
\------------------------------/
Remove the extra TH in your code
http://jsfiddle.net/yqQsP/
<html>
<body>
<TABLE border="1" >
<CAPTION><EM>A test table with merged cells</EM></CAPTION>
<TR>
<TH colspan="2"> Average</TH>
<TH rowspan="2">Red<BR>eyes </TH>
</TR>
<TR>
<TH>height</TH><TH>weight</TH>
</TR>
<TR>
<TD>1.9<TD>0.003<TD>40%</TD>
</TR>
<TR>
<TD>1.7<TD>0.002<TD>43%</TD>
</TR>
</TABLE>
</body>
</html>
While nauphal has already addressed your problem, I just wanted to make some suggestions regarding your HTML structure.
First, upper-case isn't mandatory (HTML's case-insensitive), though should you ever switch to XHTML lower-case is mandatory (and, frankly, looks a little nicer too).
Second, because a tbody element is always inserted by the browser (I'm not sure about all clients, but certainly visual web-clients) if there isn't one present already, it's usually best to wrap those elements that represent the 'body' of the table in a tbody yourself, that way you can assign the th element-rows to a thead, which increases semantics a little (I'm not sure how useful that is, but every little helps).
Third, remember to close your tags:
<TR>
<TD>1.9<TD>0.003<TD>40%</TD>
</TR>
Should, really, be:
<TR>
<TD>1.9</TD><TD>0.003</TD><TD>40%</TD>
</TR>
Again, it's not mandatory (in HTML 4, I believe), but it reduces the scope for errors introduced by having extra, un-closed, start-tags around your mark-up.
Fourth, and this is just nit-picking, possibly, if you're wanting to style the whole of the caption as emphasized text it's easier to avoid inserting extra mark-up and just style the caption directly.
That said, here's my version of your table and some CSS:
<table>
<caption>A test table with merged cells</caption>
<theader>
<tr>
<th colspan="2">Average</th>
<th rowspan="2">Red Eyes</th>
</tr>
<tr>
<th>height</th>
<th>weight</th>
</tr>
</theader>
<tbody>
<tr>
<td>1.9</td>
<td>0.003</td>
<td>40%</td>
</tr>
<tr>
<td>1.7</td>
<td>0.002</td>
<td>43%</td>
</tr>
</tbody>
</table>
CSS:
caption {
font-style: italic;
}
td,
th {
border: 1px solid #000;
padding: 0.2em;
}
JS Fiddle.
Change First Row
<TR>
<TH colspan="2"> Average</TH>
<TH rowspan="2">Red<BR>eyes </TH>
</TR>
It will solve the problem
Related
In my project I have a contacts Table with some information column like below
<table>
<thead>
<tr>
<th>Name</th>
<th>Designation</th>
<th>Organization</th>
<th>Address</th>
</tr>
</thead>
<tbody>
<tr>
<td>Aziz</td>
<td>Executive</td>
<td>BIBT</td>
<td>Dhaka</td>
</tr>
<tr>
<td>Mizan</td>
<td>Manager</td>
<td>BIBT</td>
<td>Dhaka</td>
</tr>
</tbody>
</table>
This form result like below
Name Designation Organization Address
---- ------------ -------------- ----------
Aziz Executive BIBT Dhaka
Mizan Manager BIBT Dhaka
But in my case I need another view for this table for print, that will show the result like below,
| Aziz | | Mizan |
| Executive, BUBT | | Manager, BUBT |
| Dhaka | | Dhaka |
How can I achieve this layout for my table? one thing I am using datatable plugin, and I need this layout only for print purpose. Any help is appreciated.
You can transpose your table using javascript. I am assuming you are using jquery,
First, you need to alter your HTML markup a bit,
You can hide and show elements based on CSS media queries, so, I am adding relevant classes to the span and td.
<table>
<thead>
<tr>
<th>Name</th>
<th>Designation</th>
<th>Organization</th>
<th>Address</th>
</tr>
</thead>
<tbody>
<tr>
<td>Aziz</td>
<td>Executive<span class = 'display-on-print'> ,BIBT</span></td>
<td class = 'hide-on-print'>BIBT</td>
<td>Dhaka</td>
</tr>
<tr>
<td>Mizan</td>
<td>Manager <span display-on-print> ,BIBT</span></td>
<td class = 'hide-on-print'>BIBT </td>
<td>Dhaka</td>
</tr>
</tbody>
</table>
<button>Transpose</button>
Now, you can use jquery to transpose the table,
$("button").click(function(){
$("table").each(function() {
var $this = $(this);
var newrows = [];
$this.find("tr").each(function(){
var i = 0;
$(this).find("td").each(function(){
i++;
if(newrows[i] === undefined) { newrows[i] = $("<tr></tr>"); }
newrows[i].append($(this));
});
});
$this.find("tr").remove();
$.each(newrows, function(){
$this.append(this);
});
});
return false;
});
<table>
<tbody>
<thead>
<tr>
<td>Aziz</td>
<tr>
<td>Executive <span> BIBT </span></td>
</tr>
<tr>
<td>Dhaka</td>
</tr>
</thead>
</tbody>
</table>
Suppose the following basic table structure:
<table>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
Is it possible to make it so that the first two data cells and the last two data cells are always 50% of the total width? If one cell gets bigger the other will shrink as much as it can but their total width will be 50% of the whole table. Ex:
|1 |2 |3 |4 |
can adjust to
|1 |2 |3 |4 |
where the start position of 1 and 3 never changes, the end position of 2 and 4 never changes.
EDIT: Ideally without nesting in a second table to house the pair of <td> elements.
A bit hacky - but you may try:
.fifty {
width: 50%
}
<table>
<tr>
<td class="fifty" colspan="2">foo</td>
<td class="fifty" colspan="2">bar</td>
</tr>
<tr>
<td>foo bar</td>
<td>foo foo bar</td>
<td>foo foo</td>
<td>foo bar</td>
</tr>
</table>
I'm trying to regenerate my site with jekyll but it's changing pre to p and adding th/td to tables.
Here's an example diff of the pre to p problem. The - indicates a line that was replaced with a + line. The code in markdown hasn't changed.
Diff
-<pre><code>-Dhttps.proxyHost=proxy -Dhttps.proxyPort=3128
-</code></pre>
+<p><code>
+-Dhttps.proxyHost=proxy -Dhttps.proxyPort=3128
+</code></p>
Markdown
```
RunScriptOnNode.Factory .runScript → create submit → submit
```
Here's an example diff of the th/td problem. The + indicates a new column that wasn't generated before and definitely isn't in my markdown file.
Diff
<table>
<thead>
<tr>
+ <th></th>
<th> Column 1 </th>
<th> Column 2 </th>
</tr>
</thead>
<tbody>
<tr>
+ <td></td>
<td> Value 1.1 </td>
<td> Value 1.2</td>
</tr>
<tr>
+ <td></td>
<td> Value 2.1 </td>
<td> Value 2.2 </td>
</tr>
...
Markdown
| Column 1 | Column 2 |
|------------|---------------------|
| Value 1.1 | Value 1.2
| Value 2.1 | Value 2.2
Why is jekyll doing this to my generated HTML files?
In these situations, it's wise to verify the versions of your markdown engine and/or if you can get the desired result by changing engines. :)
I have a two-row table like this:
---------------------------
| 1 Item | Total: $370.00 |
---------------------------
| View Cart Check-out |
---------------------------
I want it to display inline, like this:
| 1 Item | Total: $370.00 | View Cart Check-out |
Is this possible with CSS?
Note: Unfortunately this code is produced by my CMS and it would be difficult to change it to use divs and then CSS float:left or display:inline-block.
Simplified HTML:
<table class="cart-block-summary">
<tbody>
<tr>
<td class="cart-block-summary-items">1 Item</td>
<td class="cart-block-summary-total">Total: $370.00</td>
</tr>
<tr class="cart-block-summary-links">
<td colspan="2">View cart Checkout</td>
</tr>
</tbody>
</table>
Worked for me:
table { width: 600px;}
tr{float:left}
http://jsfiddle.net/N5fhU/
You could also remove the last TR that way it will look all in one line
<table class="cart-block-summary">
<tbody>
<tr>
<td class="cart-block-summary-items">1 Item</td>
<td class="cart-block-summary-total">Total: $370.00</td>
<td class="cart-block-summary-links" colspan="2">View cart Checkout</td>
</tr>
</tbody>
</table>
I've got an HTML table of which I cannot depend on how many rows and/or columns it will contain - so using index numbers is not possible. Here is an example of the table:
|Name|Description|Credit|Balance|
|Bob | Rent |400.00|1000.00|
|Jim | Car |100.00|4000.00|
Here is the HTML:
<table>
<thead>
<tr>
<th>Name</th>
<th>Description</th>
<th>Credit</th>
<th>Balance</th>
</tr>
</thead>
<tbody>
<tr>
<td>Bob</td>
<td>Rent</td>
<td>400.00</td>
<td>1000.00</td>
</tr>
<tr>
<td>Jim</td>
<td>Car</td>
<td>100.00</td>
<td>4000.00</td>
</tr>
</tbody>
</table>
I need to get the credit amount for which ever name I need.
Got it:
//tr[td[.="Jim"]]/td[count(ancestor::table/thead/tr/th[.="Credit"]/preceding-sibling::*)+1]