html table format rows and columns

html table format rows and columns - html

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)

Related

How can I merge cell 28 and 29

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

Sum of <td> in dynamic Jquery

I have this table where I show in the td of white color is the consolidated information of the td of gray color.
Like this:
The yellow color fields "- Und" It should show the sum of the fields below.
The correct result would look something like this:
I have identified the tds by an id, but I can't get it to add up.
tdgray = gray
tdwhite = white
var total = 0;
$(".tdgray").each(function() {
total += parseInt($(this).text()) || 0;
});
$(".tdwhite").text(total);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<TABLE BORDER>
<TR>
<TD>price</TD>
</TR>
<TR>
<TD id="tdwhite" class="tdwhite"></TD>
</TR>
<TR>
<TD class="tdgray">421</TD>
</TR>
<TR>
<TD class="tdgray">124</TD>
</TR>
<TR>
<TD class="tdgray">982</TD>
</TR>
<TR>
<TD id="tdwhite" class="tdwhite">Und</TD>
</TR>
<TR>
<TD class="tdgray">200</TD>
</TR>
<TR>
<TD class="tdgray">200</TD>
</TR>
<TR>
<TD class="tdgray">200</TD>
</TR>
<TR>
<TD class="tdgray">200</TD>
</TR>
</TABLE>
If you see the result works but adds all the gray tds and does not go from record to record, I have a table with more than 300 white tds, can be a problem some solution?
LOOK THE EXAMPLE HERE

Your explanation of what you are needing is quite confusing.
I believe this is what you are looking for. It uses nextUntil() to loop through the rows that have a tdgray after each tdwhite and sums that group
$(".tdwhite").text(function() {
var total = 0;
$(this).parent().nextUntil(':has(.tdwhite)').each(function() {
total += parseInt($(this).find('.tdgray').text()) || 0;
});
return total
});
.tdwhite{color:red}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<TABLE BORDER>
<TR>
<TD>price</TD>
</TR>
<TR>
<TD id="tdwhite" class="tdwhite"></TD>
</TR>
<TR>
<TD class="tdgray">421</TD>
</TR>
<TR>
<TD class="tdgray">124</TD>
</TR>
<TR>
<TD class="tdgray">982</TD>
</TR>
<TR>
<TD class="tdwhite">Und</TD>
</TR>
<TR>
<TD class="tdgray">200</TD>
</TR>
<TR>
<TD class="tdgray">200</TD>
</TR>
<TR>
<TD class="tdgray">200</TD>
</TR>
<TR>
<TD class="tdgray">200</TD>
</TR>
</TABLE>

Here is another (Vanilla JavaScript) solution:
document.querySelectorAll(".tdwhite").forEach(el => {
let p, total = 0;
for (p = el.parentNode.nextElementSibling;
(p && !p.querySelector('.tdwhite')); p = p.nextElementSibling)
total += +p.querySelector('.tdgray').textContent || 0;
el.textContent = total
});
.tdwhite {
color: red
}
<TABLE BORDER>
<TR>
<TD>price</TD>
</TR>
<TR>
<TD id="tdwhite" class="tdwhite">one</TD>
</TR>
<TR>
<TD class="tdgray">421</TD>
</TR>
<TR>
<TD class="tdgray">124</TD>
</TR>
<TR>
<TD class="tdgray">982</TD>
</TR>
<TR>
<TD class="tdwhite">Und</TD>
</TR>
<TR>
<TD class="tdgray">200</TD>
</TR>
<TR>
<TD class="tdgray">200</TD>
</TR>
<TR>
<TD class="tdgray">200</TD>
</TR>
<TR>
<TD class="tdgray">200</TD>
</TR>
</TABLE>

How to align <td>s from 1 table against another?

I'm new to HTML/CSS, and I'm having a hard time aligning the Opening days, hours, closing days of the Chicken shop against the Open, Hours, and Close from the table. I want the days and time to align directly below each category. Such as Open (Sun/Mon..), Hours (9-3pm), Close (Tues/Fri). Below are my codes, any advise would be greatly appreciated!!! Thank you!!!
<table id="shops">
<tr>
<th>Shops</th>
<th>Location</th>
<th>Store Hours</th>
<th>Products</th>
</tr> <!-- Nested table for store hours and product types-->
<tr>
<td colspan="2"></td>
<td>
<table id="hours_table">
<tr>
<th>OPEN</th>
<th>HOURS</th>
<th>CLOSE</th>
</tr>
</table>
</td>
<td>
<table id="products_table">
<tr>
<th>Animals</th>
<th>Cost</th>
<th>Items</th>
<th>Cost</th>
</tr>
</table>
</td>
</tr>
<tr>
<td id="chicken_shop">Cuckoo House Chicken Shop</td>
<td>West Natura</td>
<td>
<table id="chicken_hours">
<tr>
<td>SUN/MON/WED/THURS/SAT</td>
<td>9AM - 3PM</td>
<td>TUES/FRI</td>
</tr>
</table>
</td>
</table>

Hi here is the solution:
<table id="shops" border='1'>
<tr>
<th>Shops</th>
<th>Location</th>
<th>Store Hours</th>
<th colspan="4">Products</th>
</tr> <!-- Nested table for store hours and product types-->
<tr>
<td id="chicken_shop">Cuckoo House Chicken Shop</td>
<td>West Natura</td>
<td>
<table width="333" id="hours_table" border='1'>
<tr>
<td>OPEN</td>
<td>HOURS</td>
<td>CLOSE</td>
</tr>
<tr>
<td>SUN/MON/WED/THURS/SAT</td>
<td>9AM - 3PM</td>
<td>TUES/FRI</td>
</tr>
</table>
</td>
<th>Animals</th>
<th>Cost</th>
<th>Items</th>
<th>Cost</th>
</tr>
</table>

Instead of using <th> you have to use <td> even if it is part of the table head.
<table>
<thead>
<tr>
<td>Shops</td>
<td>SOmethng</td>
<td>Something#2</td>
</tr>
</thead>
<tbody>
<tr>
<td>Something in the body of the table</td>
<td>something</td>
<tdSomething</td>
</tr>
</tbody>
</table>
I suggest using w3schools.com for additional info.Also you can add borders in case you want some borders around it.

XPath - getting data including HTML tags

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>

HTML table parsing in swift

I am trying to parse below HTML text to get data from tag
<table class=\"table table-condensed\">
<tr>
<td colspan =\"2\">
<h4>New Company</h4>
</td>
</tr>
<tr>
<td>application</td>
<td>web</td>
</tr>
<tr>
<td>server_name</td>
<td>news.com</td>
</tr>
<tr>
<td colspan =\"2\">
<h4>Internal Machine</h4>
</td>
</tr>
<tr>
<td>IP</td>
<td>1.1.1.1</td>
</tr>
<tr>
<td>MAC</td>
<td>AC:87:87:87:87:87</td>
</tr>
<tr>
<td colspan =\"2\">
<h4>External Machine</h4>
</td>
</tr>
<tr>
<td>IP</td>
<td>217.16.26.161</td>
</tr>
<tr>
<td> Location</td>
<td>test</td>
</tr>
<tr>
<td colspan =\"2\">
<h4>Additional Information</h4>
</td>
</tr>
<tr>
<td>Amount Sent</td>
<td>00.0 B</td>
</tr>
<tr>
<td>Amount Received</td>
<td>2.5 KB</td>
</tr>
<tr>
<td>Application</td>
<td>web</td>
</tr>
<tr>
<td>Ports</td>
<td>12345, 123</td>
</tr>
</table>

You can use the following libraries to help you parse HTML in Swift:
Kanna
Fuzi
NDHpple
For example, this can extract all TD values in your HTML using Kanna (code not tested):
let html = "<html>...</html>"
if let doc = Kanna.HTML(html: html, encoding: NSUTF8StringEncoding) {
for td in doc.css("td") {
print(td)
}
}

We Keep Coding

html mysql json google-apps-script actionscript-3 ms-access google-chrome google-maps reporting-services sql-server-2008

html table format rows and columns - html

it's because you are using bad quotes “,”. You have to use normal ones " (ASCII code: 034)

Related

How can I merge cell 28 and 29

Sum of <td> in dynamic Jquery

How to align <td>s from 1 table against another?

XPath - getting data including HTML tags

HTML table parsing in swift

Categories

Resources