When I use **collspan=2 **on the cell 28 the table doesn't have a good view and my expectation is merge cell 28 and 29 without breaking.
<table width="100%" border="2">
<tr>
<td colspan="2" rowspan="2">1</td>
<td colspan="2">3</td>
<td colspan="2">5</td>
</tr>
<tr>
<td colspan="2" rowspan="2">9</td>
<td colspan="2" rowspan="2">11</td>
</tr>
<tr>
<td>13</td>
<td rowspan="3">14</td>
</tr>
<tr>
<td rowspan="3">19</td>
<td rowspan="3">21</td>
<td colspan="2">22</td>
<td>24</td>
</tr>
<tr>
<td rowspan="2">28</td>
<td rowspan="2">29</td>
<td rowspan="2">30</td>
</tr>
<tr>
<td>32</td>
</tr>
</table>
Simple typo. you tried collspan, but it's colspan.
the full table row should look like this:
<tr>
<td rowspan="2" colspan="2">28 + 29</td>
<td rowspan="2">30</td>
</tr>
A word of advice from a very old coder:
learning this level of table trickery was important in 1999,
bevor CSS and flexbox and grid came along.
Now it's irrelevant.
Please check the image #epascarello #bjelli
Related
I have Wordpress with Web Scraper tool (PHP in background) that uses XPath to retreive data from other websites.
I'm facing a problem where I get all needed data, but these data are stripped from HTML tags.
XPath formula I'm using:
//table/tbody/tr[td//text()[contains(., 'FFF')]]
Data I'm using:
<table id="myTable">
<thead>
<tr>
<th>#</th>
<th>First</th>
<th>Second</th>
<th>G</th>
<th>Z</th>
<th>C</th>
</tr>
</thead>
<tbody>
<tr>
<td>1.</td>
<td>D</td>
<td>FFF</td>
<td class="txt-c">6</td>
<td class="txt-c">0</td>
<td class="txt-c">0</td>
</tr>
<tr>
<td>2.</td>
<td>C</td>
<td>YYY</td>
<td class="txt-c">4</td>
<td class="txt-c">1</td>
<td class="txt-c">0</td>
</tr>
<tr>
<td>3.</td>
<td>B</td>
<td>ZZZ</td>
<td class="txt-c">4</td>
<td class="txt-c">0</td>
<td class="txt-c">0</td>
</tr>
<tr>
<td>4.</td>
<td>A</td>
<td>FFF</td>
<td class="txt-c">3</td>
<td class="txt-c">0</td>
<td class="txt-c">0</td>
</tr>
</tbody>
</table>
Result I'm getting:
1. D FFF 6 0 0 4. A FFF 3 0 0
Result I need:
<tr>
<td>1.</td>
<td>D</td>
<td>FFF</td>
<td class="txt-c">6</td>
<td class="txt-c">0</td>
<td class="txt-c">0</td>
</tr>
<tr>
<td>4.</td>
<td>A</td>
<td>FFF</td>
<td class="txt-c">3</td>
<td class="txt-c">0</td>
<td class="txt-c">0</td>
</tr>
Tool I'm using: https://wordpress.org/plugins/wp-web-scraper/
Exact shortcode I'm using in wordpress (url changed):
[wpws url='https://myweb.comm' query='%2F%2Ftable%2Ftbody%2Ftr%5Btd%2F%2Ftext()%5Bcontains(.%2C%20%27FFF%27)%5D%5D' output='html' query_type='xpath' querydecode='1']
All I need is same filtered HTML-tagged table.
Thank you for answers.
Thank you for your thoughts.
I have finally managed to get it working. The plugin itself is working fine. Only problem was missing table pair tag in Wordpress post where shortcode is used.
Solution:
<table>
[wpws url='https://yoururl.com' query='your query' output='html' query_type='xpath']
</table>
So I am trying to split cells in a table using colspan but I am seeing some odd behavior. In the code bellow the first table does not render as expected.
In particular the row with the 1/4 and 1/2 column are not spanning to 2x25% occupancy and then one that uses the remainder space, and this messes up the proper spanning of the 1/3 cells and 1/2 cells... On the other the second table looks as expected.
I am not sure if this is a bug in Chrome?? it seems to have also hill behavior in IE9, am i missing something here? Is there a better method to get this done?
You can see live version of code at: https://jsfiddle.net/4xwm33n6/
Unexpected alignment:
<table border="1" align="center" cellspacing="0" width="400px">
<tr >
<td colspan="100%" align="center">1/1</td>
</tr>
<tr>
<td colspan="33.33%" align="center">1/3</td>
<td colspan="33.33%" align="center">1/3</td>
<td colspan="33.33%" align="center">1/3</td>
</tr>
<tr>
<td colspan="25%" align="center">1/4</td>
<td colspan="25%" align="center">1/4</td>
<td colspan="50%" align="center">1/2</td>
</tr>
<tr>
<td colspan="50%" align="center">1/2</td>
<td colspan="50%" align="center">1/2</td>
</tr>
</table>
This works (but two 1/4 cannot be merged as one):
<table border="1" align="center" cellspacing="0" width="400px">
<tr >
<td colspan="100%" align="center">1/1</td>
</tr>
<tr>
<td colspan="33.33%" align="center">1/3</td>
<td colspan="33.33%" align="center">1/3</td>
<td colspan="33.33%" align="center">1/3</td>
</tr>
<tr>
<td colspan="25%" align="center">1/4</td>
<td colspan="25%" align="center">1/4</td>
<td colspan="25%" align="center">1/4</td>
<td colspan="25%" align="center">1/4</td>
</tr>
<tr>
<td colspan="50%" align="center">1/2</td>
<td colspan="50%" align="center">1/2</td>
</tr>
</table>
To do what you want to do you need something along the lines of:
<table>
<tr>
<td colspan="12">1/1</td>
</tr>
<tr>
<td colspan="6">1/2</td>
<td colspan="6">1/2</td>
</tr>
<tr>
<td colspan="4">1/3</td>
<td colspan="4">1/3</td>
<td colspan="4">1/3</td>
</tr>
<tr>
<td colspan="3">1/4</td>
<td colspan="3">1/4</td>
<td colspan="3">1/4</td>
<td colspan="3">1/4</td>
</tr>
</table>
This way you can combine the number of cells you need. By the way I got the 12 by using the lowest common multiple of 4 and 3...
Sorry for wrote comment like answer, I can't comment this post :(
colspan mean how many cells You want to merge, not width. You can't set width in colspan.
You should use colspan="#" using a number not a percent.
For example, if you want a td to go across two columns, use colspan="2"
<table>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td colspan="2">4</td>
<td>5</td>
</tr>
</table>
https://jsfiddle.net/xxurc50n/1/
I am having problems with formatting a table. For some reason, the colspans and rowspans are not working and the cells are just dropped into the first row and column available. I have made column groups specifying the width of the columns. I have the code here:
<table class = “programs” border=“1”
summary=“Lists the morning programs aired by KPAF from 5:00 a.m. to 12:00p.m.(central time).>
<caption> All Times Central </caption>
<colgroup>
<col class = “timeColumn” />
<col class = “wDayColumns” span =“5”/>
<col class = “wEndColumns” span=“2”/>
</colgroup>
<thead>
<th>Time</th>
<th>Monday</th>
<th>Tuesday</th>
<th>Wednesday</th>
<th>Thursday</th>
<th>Friday</th>
<th>Saturday</th>
<th>Sunday</th>
</thead>
<tbody>
<tr>
<th>5:00</th>
<td colspan =“5” rowspan=“4”>Dawn Air</td>
<td colspan =“1”>Dawn Air Weekends</td>
<td colspan =“1”>Sunday Magazine</td>
</tr>
<tr>
<th>5:30</th>
</tr>
<tr>
<th>6:00</th>
<td col = “1” rowspan = “2”>Weekend Reflections</td>
</tr>
<tr>
<th>6:30</th>
</tr>
<tr>
<th>7:00</th>
<td colspan=“5”> Local News</td>
<td colspan=“1” rowspan=“2”>Weekend Wrap</td>
<td colspan=“1” rowspan=“2”>Radio U</td>
</tr>
<tr>
<th>7:30</th>
<td colspan=“5”>World News Feed</td>
</tr>
<tr>
<th>8:00</th>
<td colspan=“5” rowspan=“4”>Classical Roots</td>
<td colspan=“1” rowspan=“3”>What can you say?</td>
<td colspan=“1” rowspan=“4”>University on the air</td>
</tr>
<tr>
<th>8:30</th>
</tr>
<tr>
<th>9:00</th>
</tr>
<tr>
<th>9:30</th>
<td colspan=“1” rowspan=“4”>Animal Talk</td>
</tr>
<tr>
<th>10:00</th>
<td colspan=“5” rowspan=“4”>Symphony City</td>
<td colspan=“1” rowspan=“1”>Word Play</td>
</tr>
<tr>
<th>10:30</th>
<td colspan=“1” rowspan=“1”>Brain Stew</td>
</tr>
<tr>
<th>11:00</th>
<td colspan=“1” rowspan=“3”>Opera Live from the East Coast</td>
<td colspan=“1” rowspan=“1”>The Inner Mind</td>
</tr>
<tr>
<th>11:30</th>
<td colspan=“1” rowspan=“1”> Grammar Rules!!</td>
</tr>
<tr>
<th>12:00</th>
<td colspan=“5” rowspan=“1”>Book Club</td>
<td colspan=“1” rowspan=“1”>Weekend Wrap</td>
</tr>
</tbody>
</table>
it's because you are using bad quotes “,”. You have to use normal ones " (ASCII code: 034)
I'm having this little table of mine, which doesn't seem to work. The CSS will tell all about what height and width I want. Do I do this in a wrong way or what am I missing in this?
And why aren't all the borders aligned?
The table, html and CSS can be seen in this jsfiddle:
http://jsfiddle.net/YaKCT/
<table class="stamtavle">
<tr>
<td rowspan=7 class="cell1"><p>Volstrups Casillas</p></td>
</tr>
<tr>
<td rowspan=3 class="cell2"><p>Colman</p></td>
</tr>
<tr>
<td class="cell3"><p>Carthago Z</p></td>
</tr>
<tr>
<td class="cell3"><p>Rosenquarz</p></td>
</tr>
<tr>
<td rowspan=3 class="cell2"><p>Lucille</p></td>
</tr>
<tr>
<td class="cell3"><p>Lordship</p></td>
</tr>
<tr>
<td class="cell3"><p>Carna</p></td>
</tr>
<tr>
<td rowspan=7 class="cell1"><p>Volstrups Corona</p></td>
</tr>
<tr>
<td rowspan=3 class="cell2"><p>Churchill</p></td>
</tr>
<tr>
<td class="cell2"><p>Cicero</p></td>
</tr>
<tr>
<td class="cell3"><p>Ziska</p></td>
</tr>
<tr>
<td rowspan=3 class="cell2"><p>Volstrups Cartia</p></td>
</tr>
<tr>
<td class="cell3"><p>Calato Z</p></td>
</tr>
<tr>
<td class="cell3"><p>Sidsel</p></td>
</tr>
</table>
Add this to your table tag
class="stamtavle" cellpadding="0" cellspacing="0"
I think you'd need a different approach to make the spacing between cells work how it was before due to your rowspan layout. This does neaten everything up though.
I'm trying to make a table in html, using fixed sizes and column spanning.
Here is the code I am working with:
<table style="width:602px;" border="1" cellspacing="0">
<tr>
<td style="height:148px; width:298px;" colspan="2"></td>
<td style="height:148px; width:298px;" colspan="2"></td>
</tr>
<tr>
<td style="height:148px; width:148px;"></td>
<td style="height:148px; width:298px;" colspan="2">content</td>
<td style="height:148px; width:148px;"></td>
</tr>
<tr>
<td style="height:148px; width:148px;"></td>
<td style="height:148px; width:298px;" colspan="2"></td>
<td style="height:148px; width:148px;"></td>
</tr>
<tr>
<td style="height:148px; width:148px;"></td>
<td style="height:148px; width:298px;" colspan="2"></td>
<td style="height:148px; width:148px;"></td>
</tr>
</table>
This works as I expect on chrome (creating 2 double length cells in the first row, and then three rows of single-double-single length cells). However, in IE8 the middle cell in the bottom 3 cells is sized to fit the "content", not to the size I defined.
Am I doing something wrong, and how should I change this to make it work as I want? Is there a better way to do what I'm trying to do?
Remove your table width, and you'll see how your table behave...
Yes, all your columns are trying to be 298px wide. This is because a table try to fit its column width with its first row... Remove the useless declaration and try this :
<table border="1" cellspacing="0">
<tr>
<td style="height:148px;" colspan="2">1fdasfsdafsdfas</td>
<td colspan="2">1</td>
</tr>
<tr>
<td style="height:148px; width:148px;">1</td>
<td style="width:298px;" colspan="2">1</td>
<td style="width:148px;">1</td>
</tr>
<tr>
<td style="height:148px;">1</td>
<td colspan="2">1</td>
<td>1</td>
</tr>
<tr>
<td style="height:148px;">1</td>
<td colspan="2">1</td>
<td>1</td>
</tr>
</table>