Given this HTML:
<!-- ...similar content... -->
<tr>
<td colspan="3" class="pcipgSubHeader"><b>November 2021</b></td>
</tr>
<tr class="pcipgAddTopPadding">
<td></td>
<td width="40px"><b>Qty</b></td>
<td width="80px"><b>Each</b></td>
</tr>
<tr>
<td style="text-align: left; padding-left: 5px;"></td>
<td>1</td>
<td>~CA $12.5669</td>
</tr>
<tr>
<td style="text-align: left; padding-left: 5px;"></td>
<td>1</td>
<td>~CA $16.4506</td>
</tr>
<tr>
<td style="text-align: left; padding-left: 5px;"></td>
<td>4</td>
<td>~CA $17.5517</td>
</tr>
<tr>
<td style="text-align: left; padding-left: 5px;"></td>
<td>1</td>
<td>~CA $24.0738</td>
</tr>
<tr>
<td style="text-align: left; padding-left: 5px;"></td>
<td>1</td>
<td>~CA $24.7314</td>
</tr>
<tr>
<td style="text-align: left; padding-left: 5px;"></td>
<td>1</td>
<td>~CA $25.4772</td>
</tr>
<tr>
<td style="text-align: left; padding-left: 5px;"></td>
<td>1</td>
<td>~CA $33.8775</td>
</tr>
<tr>
<td style="text-align: left; padding-left: 5px;"></td>
<td>1</td>
<td>~CA $35.3709</td>
</tr>
<tr>
<td colspan="3"> </td>
</tr>
<tr>
<td></td>
<td width="80px">Total Lots:</td>
<td><b>8</b></td>
</tr>
<tr>
<td></td>
<td>Total Qty:</td>
<td><b>11</b></td>
</tr>
<tr>
<td></td>
<td>Min Price:</td>
<td><b>CA $12.5669</b></td>
</tr>
<tr>
<td></td>
<td>Avg Price:</td>
<td><b>CA $23.7625</b></td>
</tr>
<tr>
<td></td>
<td>Qty Avg Price:</td>
<td><b>CA $22.0686</b></td>
</tr>
<tr class="pcipgAddBottomPadding">
<td></td>
<td>Max Price:</td>
<td><b>CA $35.3709</b></td>
</tr>
<!-- ...similar content... -->
and with a reference to . being the first row shown (though not the first row looking like that), I need to select all subsequent rows up to and excluding the first row that has a td with a colspan. This does not work:
./following-sibling::tr[preceding-sibling::tr[td[#colspan]]]
In a C#/HTML Agility Pack XPath expression, it doesn't stop at the desired row, and runs all the way to the end of the parent node.
This XPath,
//tr[td/#class='pcipgSubHeader']
/following-sibling::tr[not(td/#colspan) and
count(preceding-sibling::tr/td/#colspan) = 1]
will select all tr elements starting at the one that has the noted td child and progressing through all sibling tr elements until and excluding the next tr element that has a td child with a colspan attribute.
Or, if as stated in the question it may be assumed that the targeted start tr element is the current node:
./following-sibling::tr[not(td/#colspan) and
count(preceding-sibling::tr/td/#colspan) = 1]
Related
I have a table with three column. But i need 9th row and 1st & 3rd column will split into 2 column. I have some stackoverflow answer but these are not solved my issue. I want something like below picture last row:
JSFIDDLE HERE.
.tg {
border-collapse: collapse;
border-spacing: 0;
margin: 0px auto;
}
.tg td {
font-family: Arial, sans-serif;
font-size: 14px;
padding: 12px 85px;
border-style: solid;
border-width: 1px;
overflow: hidden;
word-break: normal;
border-color: black;
}
.tg th {
font-family: Arial, sans-serif;
font-size: 14px;
font-weight: normal;
padding: 12px 85px;
border-style: solid;
border-width: 1px;
overflow: hidden;
word-break: normal;
border-color: black;
}
.tg .tg-0pky {
border-color: inherit;
text-align: left;
vertical-align: top
}
<table class="tg">
<tr>
<th class="tg-0pky">Applicants</th>
<th class="tg-0pky"></th>
<th class="tg-0pky">Joint Applicants</th>
</tr>
<tr>
<td class="tg-0pky"></td>
<td class="tg-0pky">Current last name or single name</td>
<td class="tg-0pky"></td>
</tr>
<tr>
<td class="tg-0pky"></td>
<td class="tg-0pky">First and middle names</td>
<td class="tg-0pky"></td>
</tr>
<tr>
<td class="tg-0pky"></td>
<td class="tg-0pky">Marital Status</td>
<td class="tg-0pky"></td>
</tr>
<tr>
<td class="tg-0pky">Country of divorce</td>
<td class="tg-0pky" rowspan="3">If divorced</td>
<td class="tg-0pky">Country of divorce</td>
</tr>
<tr>
<td class="tg-0pky">City of divorce if in Canada</td>
<td class="tg-0pky">City of divorce if in Canada</td>
</tr>
<tr>
<td class="tg-0pky">Court file number</td>
<td class="tg-0pky" colspan="2">Court file number</td>
</tr>
<tr>
<td class="tg-0pky"></td>
<td class="tg-0pky">Religious denomination</td>
<td class="tg-0pky"></td>
</tr>
<tr>
<td class="tg-0pky"></td>
<td class="tg-0pky">Age and date of birth</td>
<td class="tg-0pky"></td>
</tr>
<tr>
<td class="tg-0pky"></td>
<td class="tg-0pky">Place of birth</td>
<td class="tg-0pky"></td>
</tr>
</table>
The short answer is: You can't split individual cells into more cells unless you do that in all other rows too. Those other rows could then implement colspan=2 attribute on places where you want to merge 2 cells into a single cell to get the desired effect.
But the issue here is that you should not use the table at all and I strongly discourage you to do so. Table should be used only for tabular data. For layouts you should be using flexbox, or grid systems found in Bootstrap and similar CSS frameworks or anything else which is relying on CSS. I can't stress enough how important this is. There are dozens of reasons not to use it among accessibility, usability, semantic, SEO etc. Please read more here: Why not use tables for layout in HTML?
try this
<!-- Head -->
<tr>
<th class="tg-0pky" colspan="2">Applicants</th>
<th class="tg-0pky"></th>
<th class="tg-0pky" colspan="2">Joint Applicants</th>
</tr>
<!-- 1 -->
<tr>
<td class="tg-0pky" colspan="2"></td>
<td class="tg-0pky">Current last name or single name</td>
<td class="tg-0pky" colspan="2"></td>
</tr>
<!-- 2 -->
<tr>
<td class="tg-0pky" colspan="2"></td>
<td class="tg-0pky">First and middle names</td>
<td class="tg-0pky" colspan="2"></td>
</tr>
<!-- 3 -->
<tr>
<td class="tg-0pky" colspan="2"></td>
<td class="tg-0pky">Marital Status</td>
<td class="tg-0pky" colspan="2"></td>
</tr>
<!-- 4 -->
<tr>
<td class="tg-0pky" colspan="2">Country of divorce</td>
<td class="tg-0pky" rowspan="3">If divorced</td>
<td class="tg-0pky" colspan="2">Country of divorce</td>
</tr>
<!-- 5 -->
<tr>
<td class="tg-0pky" colspan="2">City of divorce if in Canada</td>
<td class="tg-0pky" colspan="2">City of divorce if in Canada</td>
</tr>
<!-- 6 -->
<tr>
<td class="tg-0pky" colspan="2">Court file number</td>
<td class="tg-0pky" colspan="2">Court file number</td>
</tr>
<!-- 7 -->
<tr>
<td class="tg-0pky" colspan="2"></td>
<td class="tg-0pky">Religious denomination</td>
<td class="tg-0pky" colspan="2"></td>
</tr>
<!-- 8 -->
<tr>
<td class="tg-0pky" colspan="2"></td>
<td class="tg-0pky">Age and date of birth</td>
<td class="tg-0pky" colspan="2"></td>
</tr>
<!-- 9 -->
<tr>
<td class="tg-0pky"></td>
<td class="tg-0pky"></td>
<td class="tg-0pky">Place of birth</td>
<td class="tg-0pky"></td>
<td class="tg-0pky"></td>
</tr>
</table>
I need to make markup for creating the next table (using HTML):
task
Here is my way of making that (doesn't work):
Step 1: Making "general" markup with all cells of equal size:
td { border: solid #aaa 1px }
<table>
<thead>
<tr>
<th colspan="4">Some Table</th>
</tr>
</thead>
<tbody>
<tr>
<td>1.1</td>
<td>1.2</td>
<td>1.3</td>
<td>1.4</td>
</tr>
<tr>
<td>2.1</td>
<td>2.2</td>
<td>2.3</td>
<td>2.4</td>
</tr>
<tr>
<td>3.1</td>
<td>3.2</td>
<td>3.3</td>
<td>3.4</td>
</tr>
</tbody>
</table>
Output: Step 1
Step 2: Using "colspan" and "rowspan" for making cells 1.3 and 2.1 bigger and deleting unnecessary cells (1.4, 2.3, 2.4, 3.3 and 3.4), except one (2.2 , just for now): Step 2
Step 3: As soon as I delete cell 2.2 - big cells (1.3 and 2.1) become "smaller": Step 3 and it isn't what I need...
Here is my final markup:
td { border: solid #aaa 1px }
<table>
<thead>
<tr>
<th colspan="4">Some Table</th>
</tr>
</thead>
<tbody>
<tr>
<td>1.1</td>
<td>1.2</td>
<td colspan="2" rowspan="2">1.3</td>
</tr>
<tr>
<td colspan="2" rowspan="2">2.1</td>
</tr>
<tr>
<td>3.1</td>
<td>3.2</td>
</tr>
</tbody>
</table>
I can't find out how to delete cell 2.2 and keep table's shape as it mentioned in the task... Appreciate any help.
Here is we Achieve the Output
table,
tr,
td {
border: 1px solid black;
}
table {
border-collapse: collapse;
}
tr {
height: 30px;
}
td {
height: 30px;
width: 50px;
text-align: center;
}
<table>
<tr>
<td>1.1</td>
<td>1.2</td>
<td colspan="2" rowspan=2>1.3</td>
</tr>
<tr>
<td colspan="2" rowspan="2">2.1</td>
</tr>
<tr>
<td>3.1</td>
<td>3.2</td>
</tr>
</table>
You should try to this code
td {
border: 1px solid #579;
}
<table>
<tbody>
<tr>
<td>1.1</td>
<td>1.2</td>
<td colspan="2">1.3</td>
</tr>
<tr>
<td colspan="2" rowspan="2">2.1</td>
<td>2.2</td>
<td>2.3</td>
</tr>
<tr>
<td>3.1</td>
<td>3.2</td>
</tr>
</tbody>
</table>
You should try this
<style>td{border:1px solid black;}
tr{height:35px;}
</style>
<table>
<tbody>
<tr>
<td colspan="4">Head</td>
</tr>
<tr>
<td>1.1</td>
<td>1.2</td>
<td colspan="2" rowspan="2">1.3</td>
</tr>
<tr>
<td colspan="2" rowspan="2">2</td>
</tr>
<tr>
<td>3.1</td>
<td>3.2</td>
</tr>
</tbody>
</table>
I am trying to use an asterisk.
by default they are somewhat aligned to be on top (hello*****)
I am using vertical-align:sub and its not working, i think it has to do maybe i am also using text align right?
<table cellspacing="0"style="border-spacing:0;">
<tr style="line-height:15px;">
<td style="width:30%;">C</td>
<td style="text-align:right;vertical-align:sub;">*****</td>
</tr>
<tr style="line-height:15px;">
<td>C+++</td>
<td style="text-align:right;">*****</td>
</tr>
<tr style="line-height:15px;">
<td>Java</td>
<td style="text-align:right">****</td>
</tr>
<tr style="line-height:15px;">
<td>C#</td>
<td style="text-align:right;">***</td>
</tr>
<tr style="line-height:15px;">
<td>Javascript</td>
<td style="text-align:right">**</td>
</tr>
<tr style="line-height:15px;">
<td>Python</td>
<td style="text-align:right;">*</td>
</tr>
</table>
I don't think asterisk is "aligned" to be on top. It's just a character designed that way. If you want it to be at the bottom, you can try the following.
table tr {
line-height:15px;
}
table tr td:last-child {
text-align: right;
}
table tr td:last-child span {
line-height: 0;
vertical-align: -7px;
vertical-align: sub;
}
<table cellspacing="0" style="border-spacing:0;">
<tr>
<td>C</td>
<td><span>*****</span></td>
</tr>
<tr>
<td>C+++</td>
<td><span>*****</span></td>
</tr>
<tr>
<td>Java</td>
<td><span>****</span></td>
</tr>
<tr>
<td>C#</td>
<td><span>***</span></td>
</tr>
<tr>
<td>Javascript</td>
<td><span>**</span></td>
</tr>
<tr>
<td>Python</td>
<td><span>*</span></td>
</tr>
</table>
So I want to remove the extra spaces highlighted in red ink shown here:
http://i.stack.imgur.com/d7Kwo.png
When I remove the top images the table width becomes correct: 800px
but what I wanted is this:http://i.stack.imgur.com/XPsz2.jpg
Here is my current code:
<html>
<head><title>Adventure</title>
<link rel="stylesheet" type="text/css" href="STYLE04.css">
</head>
<body>
<table style="width:800px; height:600px" >
<tr>
<td colspan=3><img src="N13BANNER.PNG"></td>
<td><img src="N13LOGO.PNG"></td>
</tr>
<tr>
<td style="width:176px"><img src="N13BUTTON1.PNG"></td>
<td width=176><img src="N13IMG5.jpg"></td>
<td colspan=2 rowspan=6><img src="DUNE204.jpg"></td>
</tr>
<tr>
<td width=176><img src="N13BUTTON2.PNG"></td>
<td width=176><img src="N13IMG1.jpg"></td>
</tr>
<tr>
<td width=176><img src="N13BUTTON3.PNG"></td>
<td width=176><img src="N13IMG4.jpg"></td>
</tr>
<tr>
<td width=176><img src="N13BUTTON4.PNG"></td>
<td width=176><img src="N13IMG9.jpg"></td>
</tr>
<tr>
<td width=176><img src="N13BUTTON5.PNG"></td>
<td width=176><img src="N13IMG6.jpg"></td>
</tr>
<tr>
<td colspan=2><h1>Webpage last edited by asdf</h1></td>
</tr>
</table>
</body>
</html>
Code sample, with an update of your table layout without the images.
Is this how you want? ... then your images is to big, and pushes the cells too wide.
table {
width: 800px;
}
td {
background-color: gray;
width: 20%;
height: 85px;
}
tr:last-child td {
height: 40px;
}
img {
vertical-align: top;
}
<table>
<tr>
<td colspan=4></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td colspan=3 rowspan=6></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td>mail</td>
<td>mail</td>
</tr>
<tr>
<td colspan=2>Webpage last edited by asdf</td>
</tr>
</table>
I want to show the below layout using html tables.
foo : jack
products : bag
bat
ball
shoes
blah : olah
I tried this but its not working as my expectations.
<table border="1">
<tr>
<th>row 1</th>
<td> Hello</td>
</tr>
<tr>
<th>row 1</th>
<td>
<table>
<tr>foo1</tr>
<tr>foo2</tr>
</table>
</td>
</tr>
<tr>
<th>row 1</th>
<td> Hello</td>
</tr>
</table>
Does this have to be a table? It seems that something like a definition list might be more appropriate to your usage, so I'd suggest the following as an option:
HTML:
<dl>
<dt>Foo:</dt>
<dd>Jack</dd>
<dt>Products:</dt>
<dd>Bag</dd>
<dd>Bat</dd>
<dd>Ball</dd>
<dd>Shoes</dd>
<dt>Blah:</dt>
<dd>Olah</dd>
</dl>
CSS:
dl {
width: 50%;
margin: 0 auto;
}
dt, dd {
font-size: 1em;
line-height: 1.2em;
}
dt {
width: 49%;
display: inline-block;
margin-top: 0.2em;
}
dd {
width: 49%;
display: block;
margin-left: 51%;
}
dt + dd {
display: inline-block;
margin-left: 0;
margin-top: 0.2em;
position: relative;
}
dt + dd:before {
content: " : ";
position: absolute;
left: -1em;
}
And the JS Fiddle demo.
Well this can be achieved by using rowspan
I think the problem is that, in your embedded table...
<table>
<tr>foo1</tr>
<tr>foo2</tr>
</table>
...you forgot to also wrap them in <td> elements:
<table>
<tr><td>foo1</td></tr>
<tr><td>foo2</td></tr>
</table>
But then, of course, you have the problem where the corresponding <th> is aligned in the middle of the table cell, instead of the top. But that can be fixed with the valign property:
<th valign="top">row 1</th>
<table>
<tr>
<td>foo</td><td>:</td><td>jack</td>
</tr>
<tr>
<td>products</td><td>:</td><td>bag</td>
</tr>
<tr>
<td><td/><td>bat</td>
</tr>
<tr>
<td><td/><td>ball</td>
</tr>
<tr>
<td><td/><td>shoes</td>
</tr>
<tr>
<td>blah</td><td>:</td><td>olah</td>
</tr>
</table>
Produces:
The key is that the colons are in a column of their own.
You can handle it using many way, but i just create it in quick way.
http://jsfiddle.net/dXU8D/
<table width="300" border="1">
<tr>
<td width="88">foo : </td>
<td width="196">jack</td>
</tr>
<tr>
<td height="99">products : </td>
<td><table width="200" border="1">
<tr>
<td>1</td>
</tr>
<tr>
<td>2</td>
</tr>
<tr>
<td>3</td>
</tr>
<tr>
<td height="59">4</td>
</tr>
</table></td>
</tr>
<tr>
<td height="23">blah : </td>
<td>olah</td>
</tr>
</table>
Or you can use rowspan to achieve this.
http://jsfiddle.net/Mzyzx/
<table width="300" border="1">
<tr>
<td width="88">foo : </td>
<td width="196">jack</td>
</tr>
<tr>
<td height="99" rowspan="5">products : </td>
<td>1</td>
</tr>
<tr>
<td>2</td>
</tr>
<tr>
<td>3</td>
</tr>
<tr>
<td>4</td>
</tr>
<tr>
<td>5</td>
</tr>
<tr>
<td height="23">blah :</td>
<td>olah</td>
</tr>
</table>
<table>
<tr>
<td style="width: 70%;">foo</td><td style="width: 10%;">:</td><td style="width: 20%;">jack</td>
</tr>
<tr>
<td>products </td><td>:</td><td>bag</td>
</tr>
<tr>
<td colspan="2"> </td><td>bat</td>
</tr>
<tr>
<td colspan="2"> </td><td>ball</td>
</tr>
<tr>
<td colspan="2"> </td><td>shoes</td>
</tr>
<tr>
<td>blah</td><td>:</td><td>olah</td>
</tr>
</table>
one more example to be complete. http://jsfiddle.net/2ufsD/