HTML table format issue - html

I currently have a code that looks something like this:
<table border="1">
<tbody>
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
</tbody>
</table>
I want to alter it so the format looks something like this:
However, it seems like whatever I try, just does not work out. How can I alter my code to make my table look like the one in the image? The CSS, sizes, and shapes don't matter, I'm just struggling to get the correct template.


Try using rowspan:
<table border="1">
<tbody>
<tr>
<td rowspan="2"></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
</tbody>
</table>


What you're missing is a rowspan tag. Insert the following just after the tbody tag:
<tr>
<td rowspan="2"></td>
</tr>

Related

How to load an image/gif in a fieldset but make its contents not inherit it?

I have a table inside a fieldset in html and i am trying to load a gif or even a picture as a background in the fieldset (in the perimeter between the table and and fieldset border). But what is happening is that the gif/picture is inherited by the table as well, making the text inside the columns unreadable...
How can i achieve loading the gif/picture only around the table (i.e the fieldset) but not to the table ?
My code is the following :
<fieldset style="background-image: url('../other/giphy.gif');">
<legend>Table of contents</legend>
<table id="contentsTable">
<tr>
<th>Info</th>
<th>Attack Type</th>
<th>Knowledge needed</th>
<th>State of challenge [Done/Pending]</th>
</tr>
<tr>
<td>Sqli from url [1]</td>
<td>SQLi</td>
<td>SQL, Python, front&backend</td>
<td>Pending</td>
</tr>
<tr>
<td></td>
<td>Command injection</td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
</fieldset>
Thanks in advance :)

How to export html into PDF format using code in R

I am trying to make decent quality tables in R using html code, however I would like to export the final table as a pdf that I can then open up in Illustrator and Photoshop to edit. I would like to export as a pdf so that I can specify the dimensions of the table.
I have little experience with html but I have got the table to work so far so I will stick with it. For (now) obvious reasons the only other method I have tried does not work:
pdf("Table.pdf", width=6, height=4, useDingbats=FALSE, pointsize=12)
Table
dev.off()
What I would like to do is export the table below as a pdf with 6" width and 4" height.
<html>
<head>
</head>
<table border="2">
<table width="100%">
<tr>
<td><b>Reef</b></td>
<td><b>Coordinates</b></td>
<td><b>Species Collected</b></td>
<style>
table{
border-collapse: collapse; //collapse all borders so they don't double up
border:1px solid #000; //add border around entire table`
}
tr{
border-top:2px solid #000; //add single line to top of each row
border-bottom:1px solid #000; //add single line to bottom of each row
}
</style>
</tr>
<tr>
<td rowspan="4">Admiral Reef</td>
<td rowspan="4">25.045 ° N, 80.395 °W</td>
</tr>
<tr>
<td><i>Acropora cervicornis</i></td>
</tr>
<tr>
<td><i>Orbicella annularis</i></td>
</tr>
<tr>
<td><i>Orbicella faveolata</i></td>
<td></td>
</tr>
<tr>
<td rowspan="4">Alligator Reef</td>
<td rowspan="4">24.842 °N, 80.624 ° W</td>
</tr>
<tr>
<td><i>Orbicella annularis</i></td>
</tr>
<tr>
<td><i>Orbicella faveolata</i></td>
</tr>
<tr>
<td><i>Orbicella franksi</i></td>
<td></td>
</tr>
<tr>
<td rowspan="4">Jaap Reef</td>
<td rowspan="4"> 24.585 °N, 81.582 °W </td>
</tr>
<tr>
<td><i>Acropora cervicornis</i></td>
</tr>
<tr>
<td><i>Orbicella annularis</i></td>
</tr>
<tr>
<td><i>Orbicella faveolata</i></td>
<td></td>
</tr>
<tr>
<td rowspan="5">Little Grecian</td>
<td rowspan ="5">25.119 °N, 80.302 °W</td>
</tr>
<tr>
<td><i>Acropora cervicornis</i></td>
</tr>
<tr>
<td><i>Acropora palmata</i></td>
</tr>
<tr>
<td><i>Orbicella annularis</i></td>
</tr>
<tr>
<td><i>Orbicella faveolata</i></td>
</tr>
<tr>
<td rowspan="1"></td>
<td></td>
<td></td>
</tr>
</table>
</html>`

The pdf function is for plotting. R has no direct way of exporting tables as PDF, never mind formatting HTML. But you can easily accomplish this via pandoc, which can be called via R.
That said, I would (fairly strongly) suggest not authoring/formatting your tables in HTML. Instead, use something like the ‹pander› package, and maybe take a look at RMarkdown as a general format for you.

Table inside another table squashed

Am having trouble nesting one table inside another:
I want the inner tables to span across the entire width of the outer table. Here is the generated HTML:
<table class="table table-bordered table-striped">
<tr><td align="center">4 laptops were not added because they lacked unique identifiers.</td></tr> <tr><td align="center">2 laptops were not added because they already exist in the database: </td></tr><tr><td>
<table><th>Hostname</th><th>Asset Tag</th><th>Serial</th>
<tr>
<td></td>
<td></td>
<td>4646466</td>
</tr>
<tr>
<td></td>
<td></td>
<td>4646467</td>
</tr>
</table></td></tr>
<tr><td align="center">2 laptops were added to the database: </td></tr><tr><td>
<table><th>Hostname</th><th>Asset Tag</th><th>Serial</th>
<tr>
<td></td>
<td></td>
<td>4646468</td>
</tr>
<tr>
<td></td>
<td></td>
<td>4646469</td>
</tr>
</table></td></tr>
</table>

Have a look
<table class="table table-bordered table-striped" border="1">
<tr><td align="center">4 laptops were not added because they lacked unique identifiers.</td></tr> <tr><td align="center">2 laptops were not added because they already exist in the database: </td></tr><tr><td>
<table border="1" style="width:100%;"><th>Hostname</th><th>Asset Tag</th><th>Serial</th>
<tr>
<td></td>
<td></td>
<td>4646466</td>
</tr>
<tr>
<td></td>
<td></td>
<td>4646467</td>
</tr>
</table></td></tr>
<tr><td align="center">2 laptops were added to the database: </td></tr><tr><td>
<table><th>Hostname</th><th>Asset Tag</th><th>Serial</th>
<tr>
<td></td>
<td></td>
<td>4646468</td>
</tr>
<tr>
<td></td>
<td></td>
<td>4646469</td>
</tr>
</table></td></tr>
</table>

Just add width attribute
width = '100%'
to the inner table. It will make it spread all over the width of the containing cell.
DEMO

how to create html table with css and table properties

I am creating one html table but i am confused with
Can any one help me to create table like attached image with color combinations.
Thank You.

Try this code. You can change the color according to your choice
<table border="1" width="50%">
<tr style="background-color: #090">
<th>1</th>
<th>1</th>
<th>1</th>
<th>1</th>
</tr>
<tr style="background-color: #7aba7b">
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr style="background-color: #99BC99">
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
</table>

Some basic HTML stuff for tables:
<table> </table> = table tag
<tr> </tr> = row tag
<td> </td> = cell tag
So you put it all together like so:
<table>
<tr>
<td> cell content </td>
</tr>
</table>
Repeat rows and cells as needed. Then add some styling with some CSS or something. Now go try it!

Content between rows in html table

I need to have a table where each row can have a child table or other content below that row.
Is there any valid way to do this?

Add another <tr> after the current one with a colspan which spans all columns and then put another <td> with a <table> therein.
<tr>
<td>col1</td>
<td>col2</td>
<td>col3</td>
</tr>
<tr>
<td colspan="3">
<table>...</table>
</td>
</tr>
<tr>
<td>col1</td>
<td>col2</td>
<td>col3</td>
</tr>
The new table will then appear between the rows.

<table>
<tbody>
<tr>
<td>
<table>
<tbody>
<tr>
<td>
problem?
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>

You can't put anything inside a table between the rows, all content has to be inside the table cells.
You can add another row, and use colspan to make it contain a single cell that spans the width of the table, and put the content in that cell.
<table>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td colspan="3"></td>
</tr>
</table>

There is no valid way. Only td-s and th-s are allowed in tr
You can however put only 1 td in the row, and set it's colspan attribute to the number of columns you have in the table.