I am creating a table and need to put a div inside it. Is the use of a div inside a table like below allowed?
<table>
<tr>
<td></td>
<td></td>
</tr>
<div class="files">
<tr>
<td></td>
<td></td>
</tr>
</div>
<tr>
<td></td>
<td></td>
</tr>
</table>
Tables can only contain rows. You can use two tables, or put a div inside of a td or th. If you just want to apply your "files" class, you can do that directly on the row. If you really want separated sections in the same table, then add a special "table-separator" class to the boundary rows with styling on that class to space them apart.
take a look at
this works:
<table>
<tr>
<td>
<div>This will work.</div>
</td>
</tr>
<table>
this does not work:
<table>
<tr>
<div> this does not work. </div>
</tr>
</table>
nor does this work:
<table>
<div> this does not work. </div>
</table>
Instead of a div, use tbody (https://developer.mozilla.org/en-US/docs/Web/HTML/Element/tbody), It's only valid to put your div between tables or to put your div inside the td (or th) element (which is probably a bad idea). All of the following is valid:
<table>
<tbody class="files">
<tr>
<td></td>
<td></td>
</tr>
</tbody>
</table>
<div class="files">
</div>
<table>
<tr>
<td>
<div class="files">
</div>
</td>
<td></td>
</tr>
</table>
Related
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 :)
Say i have 2 different tables using bootstrap:
<table class="table">
<tbody>
<tr>
<td>Name:</td>
<td></td>
</tr>
</tbody>
</table>
<table class="table">
<tbody>
<tr>
<td>Favorites:</td>
<td></td>
</tr>
</tbody>
</table>
I'm using bootstrap, how can i make it so that both tables are aligned? Both tables only have 2 columns each. I would like the 2nd column to match vertically.
It's so random how wide they are.
So lets say the first table's 2nd column is aligned at the center of the page
but the 2nd table's 2nd column is so far right of the page.
It looks like this
You can place both tables in a row, and then place each of the tables in their own container, giving each a class of col-6
using Bootstrap
<table style="height: 100px;">
<tbody>
<tr>
<td class="align-baseline">baseline</td>
<td class="align-top">top</td>
<td class="align-middle">middle</td>
<td class="align-bottom">bottom</td>
<td class="align-text-top">text-top</td>
<td class="align-text-bottom">text-bottom</td>
</tr>
</tbody>
</table>
or you can use CSS
Nevermind, i solved it. Only needed to add Style attribute inside my Table divisions.
<table class="table">
<tbody>
<tr>
<td style="width:50%;">Name:</td>
<td></td>
</tr>
</tbody>
</table>
<table class="table">
<tbody>
<tr>
<td style="width:50%;">Favorites:</td>
<td></td>
</tr>
</tbody>
</table>
now the 2nd column where all my variables i print out will align with each other.
If I have the HTML below I want to find a single CSS class definition that will effect the outermost table but not the sub tables. Without changing the HTML can I get .myClass to do this:
I was playing around with the not selector but couldn't get it to work.
.myClass tr td div :not(table) {
background-color: red;
}
<body>
<div class="myClass">
<table>
<tr>
<td>
<div>My</div>
</td>
</tr>
<tr>
<td>
<div>
<table>
<tr>
<td>Hello</td>
</tr>
</table>
</div>
</td>
</tr>
<tr>
<td>
<div>
<table>
<tr>
<td>World</td>
</tr>
</table>
</div>
</td>
</tr>
</table>
</div>
</body>
No you cannot do this with pure css without changing your html.
You can do it with jQuery or by simply putting the 'My' inside of a span, because text is not accesible by a selector.
But in all fairness your question was partly answered by #Pangloss. To access the outer table, just use >. Your problem lies in the fact that on the 2nd and 3rd rows, you still have the outer table present. Your question should actually be something like "What's the selector for an element that does not have a specific child type", and then you would find that you cannot target a parent of an element on css yet.
The first cell is the first div inside the first tr, we can target this using the following:
tr:first-child div:first-child{
background:red;
}
Full snippet:
tr:first-child div:first-child {
background: red;
}
<body>
<div class="myClass">
<table>
<tr>
<td>
<div>My</div>
</td>
</tr>
<tr>
<td>
<div>
<table>
<tr>
<td>Hello</td>
</tr>
</table>
</div>
</td>
</tr>
<tr>
<td>
<div>
<table>
<tr>
<td>World</td>
</tr>
</table>
</div>
</td>
</tr>
</table>
</div>
</body>
i was trying to put table inside a table like this:
<table>
<tr>
<td>Filename</td>
<td>Size</td>
</tr>
<tr>
<table>
<tr>
<td>my cool file name</td>
<td>654 KB</td>
</tr>
</table>
</tr>
</table>
the reason i want to do this is to set the second table a height
and than overflow:auto so the second table have a scroll bar to scroll down
is that possible , and it it does , how?
You still need a <td>/<th> within a <tr> tag, so add either of those between your <tr> & nested <table> (and probably apply colspan="2")
Also, off the top of my head I'm not sure if the <td>/<th> supports an overflow with scrolling, but if not you can always wrap the nested <table> in a <div> and style it.
<table> isn't valid inside <tr>. Put it inside a <td> inside a <tr> instead.
Like this:
<table>
<tr>
<td>Filename</td>
<td>Size</td>
</tr>
<tr>
<td> <!-- ** add this ** -->
<table>
<tr>
<td>my cool file name</td>
<td>654 KB</td>
</tr>
</table>
</td> <!-- ** add this ** -->
</tr>
</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.