I am getting space above my table when this html page is run by a particular browser:
<table>
<center>
<tr><th width="150" scope="col">
5/28 - 5:47 PM: <br><br> x <br> x</th> <td width=1000>y
</td></tr>
<br><br><tr><td> </td></tr>
<tr><th width="150" scope="col">
5/16 - 12:59 AM: <br><br> z <br> z <br>z <br> z</th><td width=1000>y</td></tr>
<br><br><tr><td> </td></tr>
<tr><th width="150" scope="col">
5/10 - 12:34 AM: <br><br>z <br>z<br>z</th><td width=1000>y</td></tr>
<br><br><tr><td> </td></tr>
<tr><th width="150" scope="col">
5/8 - 4:47 PM: <br><br> z <br>z</th> <td width=1000> y</td></tr>
<br><br><tr><td> </td></tr>
</table>
How do I get rid of it?
This HTML is badly broken. You can't have tags or text inside your table but outside a TR. You have tags like CENTER and BR in that location. You should use a validator or a decent IDE, which would catch these problems.
With some formatting, your code is:
<table>
<center> <!-- THIS IS INVALID -->
<tr>
<th width="150" scope="col">
5/28 - 5:47 PM: <br><br> x <br> x
</th>
<td width=1000>y</td>
</tr>
<br><br><!-- THIS IS INVALID -->
<tr>
<td> </td>
</tr>
<tr>
<th width="150" scope="col">
5/16 - 12:59 AM: <br><br> z <br> z <br>z <br> z
</th>
<td width=1000>y</td>
</tr>
<br><br><!-- THIS IS INVALID -->
<tr><td> </td></tr>
<tr>
<th width="150" scope="col">
5/10 - 12:34 AM: <br><br>z <br>z<br>z
</th>
<td width=1000>y</td>
</tr>
<br><br><!-- THIS IS INVALID -->
<tr><td> </td></tr>
<tr>
<th width="150" scope="col">
5/8 - 4:47 PM: <br><br> z <br>z
</th>
<td width=1000> y</td>
</tr>
<br><br><!-- THIS IS INVALID -->
<tr>
<td> </td>
</tr>
</table>
On top of that, your CENTER tag has no closing tag, and you really shouldn't be using CENTER, anyway.
You also have inconsistent numbers of child elements for your TRs; sometimes it's one, and sometimes it's two. This will cause inconsistent display unless you use a colspan="2" attribute on the lone children.
Your code is not well edited, you didn't close your <center> tag.
And to get rid of the extra spaces on top of your table, you should remove <br> tags between your <tr> elements
So instead of
<tr>
<th width="150" scope="col">
5/28 - 5:47 PM: <br><br> x <br> x
</th>
<td width=1000>y</td>
</tr>
<br><br>
<tr>
<td> </td>
</tr>
You should have
<tr>
<th width="150" scope="col">
5/28 - 5:47 PM: <br><br> x <br> x
</th>
<td width=1000>y</td>
</tr>
<tr>
<td> </td>
</tr>
Related
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.
I want to insert a full width row as shown in the below image by Arrow
I have tried colspan, rowspan but did not work for me so removed from question (otherwise question will mess up).
here is what i have tried: https://jsfiddle.net/eabangalore/y3Lt470z/16/
table td {
padding: 5px;
}
<table width="500px" border="0" cellspacing="0" cellpadding="0">
<thead>
<tr>
<th style="width:3%"></th>
<th style="width:10%">Name</th>
<th style="width:10%">Age</th>
<th style="width:10%">Designation</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<div style="width:50px;height:70px;border-radius:50%;">
<img style="width:100%;height:100%;" src="https://via.placeholder.com/150"/>
</div>
</td>
<td align="center">Alpha</td>
<td align="center">21 year</td>
<td align="center">Software</td>
</tr>
<tr>
<td>
<div style="width:50px;height:70px;border-radius:50%;">
<img style="width:100%;height:100%;" src="https://via.placeholder.com/150"/>
</div>
</td>
<td align="center">Alpha</td>
<td align="center">21 year</td>
<td align="center">Software</td>
</tr>
</tbody>
</table>
Qusetion: i want to add a full-width row as shown by arrow in red color area (above image)
Note: i cannot change table into divs as i'm working on maintenance project.
You looking for this table structure. You have to use once rowspan and once colspan.
<table width="500px" border="1" cellspacing="0" cellpadding="0">
<thead>
<tr>
<th style="width:3%"></th>
<th style="width:10%">Name</th>
<th style="width:10%">Age</th>
<th style="width:10%">Designation</th>
</tr>
</thead>
<tr>
<th class="" rowspan="2">
<img style="width:100%;height:100%;" src="https://via.placeholder.com/150"/>
</th>
<th class="">1</th>
<th class="">2</th>
<th class="">3</th>
</tr>
<tr>
<td class="" colspan="4">new row</td>
</tr>
<tr>
<th class="" rowspan="2">
<img style="width:100%;height:100%;" src="https://via.placeholder.com/150"/>
</th>
<th class="">a</th>
<th class="">b</th>
<th class="">c</th>
</tr>
<tr>
<td class="" colspan="4">new row</td>
</tr>
</table>
Small Note: use instead inline style classes.
Is encoding/xml the best library to parse HTML table files like this one and exist some examples how to do it?
<html><head>
<meta charset="utf-8">
</head>
<body>
<a name="Test1">
<center>
<b>Test 1</b> <table border="0">
<tbody><tr>
<th> Type </th>
<th> Region </th>
</tr>
<tr>
<td> <table border="0">
<thead>
<tr>
<th><b>Type</b></th>
<th> </th>
<th> Count </th>
<th> Percent </th>
</tr>
</thead>
<tbody><tr>
<td> <b>T1</b> </td>
<th> </th>
<td class="numeric" bgcolor="#ff0000"> 34,314 </td>
<td class="numeric" bgcolor="#ff0000"> 31.648% </td>
</tr>
<tr>
<td> <b>T2</b> </td>
<th> </th>
<td class="numeric" bgcolor="#bf3f00"> 25,820 </td>
<td class="numeric" bgcolor="#bf3f00"> 23.814% </td>
</tr>
<tr>
<td> <b>T3</b> </td>
<th> </th>
<td class="numeric" bgcolor="#24da00"> 4,871 </td>
<td class="numeric" bgcolor="#24da00"> 4.493% </td>
</tr>
</tbody></table><br>
</td>
<td> <table border="0">
<thead>
<tr>
<th><b> Type</b></th>
<th> </th>
<th> Count </th>
<th> Percent </th>
</tr>
</thead>
<tbody><tr>
<td> <b>T4</b> </td>
<th> </th>
<td class="numeric" bgcolor="#ff0000"> 34,314 </td>
<td class="numeric" bgcolor="#ff0000"> 31.648% </td>
</tr>
<tr>
<td> <b>T5</b> </td>
<th> </th>
<td class="numeric" bgcolor="#53ab00"> 11,187 </td>
<td class="numeric" bgcolor="#53ab00"> 10.318% </td>
</tr>
<tr>
<td> <b>T6</b> </td>
<th> </th>
<td class="numeric" bgcolor="#bf3f00"> 25,820 </td>
<td class="numeric" bgcolor="#bf3f00"> 23.814% </td>
</tr>
</tbody></table><br>
</td>
</tr>
</tbody></table>
</center>
</a>
</body></html>
Thank you in advance.
Depends on your HTML.
Strictly speaking, the only one kind of HTML which is guaranteed to be parsed by a conforming XML parser is XHTML, but despite the fact XHTML once has been thought of as coming to be the HTML standard, it has not really taken off the ground and these days it's considered obsolete (in favor of the much hyped "HTML5" thing and all the ecosystem around it). The basic problem with HTML is that while it looks like XML it has different rules. One glaring distinction is that <br> is a perfectly legal HTML but is an unterminated element in XML (in the latter, it has to be spelled <br/>), and there are a lot more differences.
On the other hand, your particular example looks quite XML'ish to me, so if you can guarantee your data, while being HTML, will always be a well-formed XML at the same time, you can just use the encoding/xml package. Otherwise go for go.net/html, as suggested by #elithrar, or find some other package.
Let's say I have a data frame in R. I'd like to write it to a file as a simple HTML table. Just the <table>, <tr>, and <td> tags.
So far this seems harder than it should be. Right now I'm trying to use R2THML like so:
HTML(dataframe, file=outpath, append=FALSE)
But then I get a ugly, html-styled file that might look like so:
<table cellspacing=0 border=1>
<caption align=bottom class=captiondataframe></caption>
<tr><td>
<table border=0 class=dataframe>
<tbody>
<tr class= firstline >
<th> </th>
<th>name </th>
<th>donations </th>
<th>clicks </th>
...
</tr>
<tr>
<td class=firstcolumn>1
</td>
<td class=cellinside>Black.text
</td>
...
</tbody>
</table>
</td></table>
<br>
Is there a way to get output that's simpler (without specifying border, headings, captions, etc. Without outputting a table inside another table)? Or is this as good as it gets?
The xtable package can generate HTML output as well as LaTeX output.
# install.packages("xtable")
library("xtable")
sample_table <- mtcars[1:3,1:3]
print(xtable(sample_table), type="html", file="example.html")
gives, in the file example.html:
<!-- html table generated in R 3.0.1 by xtable 1.7-1 package -->
<!-- Fri Jul 19 09:08:15 2013 -->
<TABLE border=1>
<TR> <TH> </TH> <TH> mpg </TH> <TH> cyl </TH> <TH> disp </TH> </TR>
<TR> <TD align="right"> Mazda RX4 </TD> <TD align="right"> 21.00 </TD> <TD align="right"> 6.00 </TD> <TD align="right"> 160.00 </TD> </TR>
<TR> <TD align="right"> Mazda RX4 Wag </TD> <TD align="right"> 21.00 </TD> <TD align="right"> 6.00 </TD> <TD align="right"> 160.00 </TD> </TR>
<TR> <TD align="right"> Datsun 710 </TD> <TD align="right"> 22.80 </TD> <TD align="right"> 4.00 </TD> <TD align="right"> 108.00 </TD> </TR>
</TABLE>
This could be further simplified with more options to xtable and print.xtable:
print(xtable(sample_table, align="llll"),
type="html", html.table.attributes="")
gives
<!-- html table generated in R 3.0.1 by xtable 1.7-1 package -->
<!-- Fri Jul 19 09:13:33 2013 -->
<TABLE >
<TR> <TH> </TH> <TH> mpg </TH> <TH> cyl </TH> <TH> disp </TH> </TR>
<TR> <TD> Mazda RX4 </TD> <TD> 21.00 </TD> <TD> 6.00 </TD> <TD> 160.00 </TD> </TR>
<TR> <TD> Mazda RX4 Wag </TD> <TD> 21.00 </TD> <TD> 6.00 </TD> <TD> 160.00 </TD> </TR>
<TR> <TD> Datsun 710 </TD> <TD> 22.80 </TD> <TD> 4.00 </TD> <TD> 108.00 </TD> </TR>
</TABLE>
(which could be directed to a file with the file argument to print.xtable as in the previous example.)
You could also have a look at the tableHTML package, that was developed for this reason.
library(tableHTML)
mtcars %>%
tableHTML()
And to print the HTML on the console:
tableHTML(mtcars[1:2, 1:3]) %>%
print(viewer = FALSE)
# <table style="border-collapse:collapse;" class=table_9302 border=1>
# <thead>
# <tr>
# <th id="tableHTML_header_1"> </th>
# <th id="tableHTML_header_2">mpg</th>
# <th id="tableHTML_header_3">cyl</th>
# <th id="tableHTML_header_4">disp</th>
# </tr>
# </thead>
# <tbody>
# <tr>
# <td id="tableHTML_rownames">Mazda RX4</td>
# <td id="tableHTML_column_1">21</td>
# <td id="tableHTML_column_2">6</td>
# <td id="tableHTML_column_3">160</td>
# </tr>
# <tr>
# <td id="tableHTML_rownames">Mazda RX4 Wag</td>
# <td id="tableHTML_column_1">21</td>
# <td id="tableHTML_column_2">6</td>
# <td id="tableHTML_column_3">160</td>
# </tr>
# </tbody>
# </table>
The table can also be styled with CSS using the add_css_ family of functions, if needed.
Details of the package and tutorials (vignettes) are here
A prettier but slower option:
library(htmlTable)
htmlTable(iris)
to_html_table<-function(dataframe){
tags$table(
tags$thead(tags$tr(lapply(colnames(dataframe), function(x) tags$th(x)))),
tags$tbody(
apply(dataframe,1, function(x) { tags$tr(lapply(x, function(y) tags$td(y)))})
))
}
The answer is actually quite simple, if you use xtable. (Thanks to Señor O for the tip.)
install.packages("xtable")
library(xtable)
out_table_x <- xtable(out_table)
print(out_table_x, type='html', file="./example.html")
My tables stack on top of each other fine unless they get 100 or so rows, in which case they align side by side on IE 10. I need them to always stack. They're fine or Firefox and on some installations of IE 10. How to I make them always stack regardless of the browser?
<html>
<head>
<title>Test Project 1</title>
</head>
<body>
<h2 style="text-align: center;">
Test Project 1</h2>
<h3 style="text-align: center;">
2013-06-09 10:08</h3>
<table float="left" clear="left" align="left" border="0" cellpadding="1" cellspacing="1" width="728" style="font-family:arial,helvetica,sans-serif;font-size: 12px;">
<tbody>
<tr>
<th scope="col">
RFI
<hr />
</th>
<th scope="col">
Description
<hr />
</th>
<th scope="col">
Rec'd
<hr />
</th>
<th scope="col">
Due
<hr />
</th>
<th scope="col">
Issued
<hr />
</th>
<th scope="col">
Age
<hr />
</th>
</tr>
</tbody>
</table>
<p>
</p>
<table float="left" clear="left" align="left" border="0" cellpadding="1" cellspacing="1" width="728" style="font-family:arial,helvetica,sans-serif;font-size: 12px;">
<tbody>
<tr>
<th scope="col">
CCO
<hr />
</th>
<th scope="col">
Description
<hr />
</th>
<th scope="col">
Rec'd
<hr />
</th>
<th scope="col">
Due
<hr />
</th>
<th scope="col">
Issued
<hr />
</th>
<th scope="col">
Age
<hr />
</th>
</tr>
</tbody>
</table>
</body>
</html>
Instead of that empty paragraph beween the tables you could try adding
<br style="clear:both"/>
As you are using float property. You need to break next element to new line ,use:
table {clear: both;}
or put a <br/> tag between tables.
Just remove the float="left" clear="left" attributes on the table tags and you will be fine. float and clear are not even valid properties of tables.
Add both the tables in a table
like
<Table id="main">
<tr>
<td>
<Table id=1> </table>
</td>
<td>
<Table id=2> </table>
</td>
</tr>
</table>