CSS to mimic simple table within div - html

I have used some AJAX to output HTML to a div.
I thought the AJAX would let me display a table, but since it outputs to a div, turns out, it does not. <td> codes etc. are ignored. I know that table-less display is considered better, anyway, however I am very weak in CSS.
Can anyone suggest how to display the following simple output without tables. I mainly need to make columns line up when text is different length.
HTML
<div id="displayhere"></div>
Output I would like to go into div except not sure how to put table in div:
<tr><td colspan=2>Heading</td></tr>
<tr><td>Short text option 1</td><td><input type="checkbox"></td></tr>
<tr><td>Really long text Option 2</td><td input type="checkbox"></td></tr>

All you need to do, in simplified form is:
var output = '<tr><td colspan=2>Heading</td></tr><tr><td>Short text option 1</td><td><input type="checkbox"></td></tr><tr><td>Really long text Option 2</td><td><input type="checkbox"></td></tr>',
table = $('<table />').appendTo('#displayhere'),
tbody = $('<tbody />').html(output).appendTo(table);
JS Bin demo.

You can have tables inside div tags..the following works fine
<div id="displayhere">
<table>
<tr>
<td colspan=2>Heading</td>
</tr>
<tr>
<td>Short text option 1</td>
<td><input type="checkbox"></td>
</tr>
<tr>
<td>Really long text Option 2</td>
<td> <input type="checkbox"></td></tr>
</table>
</div>

As #DavidThomas implies, you can have an HTML table inside a <div>, you just can’t have <tr> tags without wrapping them in a <table> tag.
I’d note that the HTML you want to insert can also be improved in a couple of ways:
There is a tag for heading cells inside tables: <th>. If the heading applies to several rows, then you should wrap those rows in a <tbody> tag, and set the scope attribute of the <th> to rowgroup
When you’re labelling a form control, you should wrap the label text in a <label> element, and set the <label>’s for attribute to the id of its form control.
Here’s the improved code. Screen reader users will find it easier to deal with this code:
<tbody>
<tr>
<th scope="rowgroup" colspan="2">Heading</th>
</tr>
<tr>
<td><label for="option1">Short text option 1</label></td>
<td><input id="option1" type="checkbox"></td>
</tr>
<tr>
<td><label for="option2">Really long text Option 2</label></td>
<td><input id="option2" type="checkbox"></td>
</tr>
</tbody>

Related

What is the best way to get a form row into a table?

I'm building an app that displays a table with some information. I want the user to be able to click on the cells and have a row slide out below it containing a form in which an action can be made.
so it would look like this:
<table>
<tr>
<td>some info 1</td>
<td>some info 2</td>
<td>some info 3</td>
</tr>
<tr>
<form> some form that spans the entire row + submit button </form>
</tr>
</table
The form would be hidden and by clicking on one of the cells the form would slide down.
The problem i'm facing is that it is not possible to render a form as a table row. I have read multiple sources that say it can't be done. I can render it inside a single cell but the form is too big for that.
One solution i read would be to wrap the entire table with a form tag and have multiple submit buttons. This to me feels like bad practice and I'm not sure it would work.
I've also looked into recreating the table with div's however every solution i find uses 'display: table' which has the exact same problem.
What is the best way to handle this? (i'm using Ruby on Rails)
<table>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<form action="">
<td colspan="3"><input type="text"></td>
</form>
</tr>
</table>
have you tried using colspan?
My advice is to replace table with divs if your project allows you to do it. You can use bootstrap (https://getbootstrap.com/examples/grid/) for making this easier.
Why:
1. Cleaner code
2. You can manipulate the divs easier than table raws/cells...
3. You can duplicate div as fast as tr .
Give it a try and than take your decision.

Styling text inside tr?

This is my simplified markup:
<table class="kOverzicht kOverzichtFirst">
<tr>
woensdag 26/02
</tr>
</table>
So I already tried using a span or p element to wrap the text, but this was not allowed when I checked it with the validator.
What is the best way to style the text inside the tr? I cannot do this through the entire table because the actual table consists of multiple tr elements.
Any suggestions?
You need a <td> inside of the <tr>
<table class="kOverzicht kOverzichtFirst">
<tr>
<td>woensdag 26/02</td>
</tr>
</table>
<tr> tag just to define a table row.. A table cell <td> where the data is contained.
Add the style text to the
<td> tag to be created inside the <tr>.
Like
`<table class="kOverzicht kOverzichtFirst">
<tr>
<td style="padding-left: 5px; font size="10""> </td>
</tr>
</table>`
This will help in styling specific lines only.
I would suggest you to wrap the text inside a td
<table class="kOverzicht kOverzichtFirst">
<tr>
<td>woensdag 26/02</td>
</tr>
</table>
Then use the following css:
table.kOverzicht td {
// define your css here
}
You should use td instead. For example,
<table class="kOverzicht kOverzichtFirst">
<tr>
<td style="color:red;">
woensdag 26/02
</td>
</tr>
Alternatively,
<style>.kOverzicht td {color:red;}</style>
<table class="kOverzicht kOverzichtFirst">
<tr>
<td>
woensdag 26/02
</td>
</tr>
As others have answered, you should really wrap the text in a cell container, a td or th element, and style that element. The details depend on the real structure of the table. In particular, a table with one column only does not usually make sense as a data table. If the text should span all the columns in the cell, you should use the colspan attribute, e.g. (assuming arbitrarily that the table has 5 columns)
<table class="kOverzicht kOverzichtFirst">
<tr>
<td colspan="5">woensdag 26/02</td>
</tr>
<!-- other rows go here -->
</table>
But to address the question as asked, you can style text inside a tr element like the text content of any other element, e.g.
tr { color: red; font-weight: bold }
However, with the invalid markup as in the question, the tr element has no content. You can see this by looking at the page in the developer tools of a browser. The browser has parsed it so that the text data precedes the entire table and the tr element is empty, <tr></tr>, so the style has no effect.
If you use valid markup with e.g. a td element inside tr, the text will be content in td. Setting text properties on tr may have an effect on it via inheritance; this happens for color, font-weight, and any other property.
It is possible to create a tr element with text directly inside it, but only using scripting, not via markup. Example:
<table id=t>
</table>
<script>
var row = document.createElement('tr');
row.textContent = 'woensdag 26/02';
document.getElementById('t').appendChild(row);
</script>
This is normally not recommended, for several reasons, but this is part of the answer to the question asked: to style text in a tr directly (and not via inheritance), you would need to create the td element with JavaScript.

HTML/CSS, getting table cells to balance

I have a table formatted as:
<table>
<tr>
<td>
Long list of info
Line two
</td>
<td>
Shorter list of info
</td>
</tr>
</table>
How can I get them to both display from the top of 'tr'? I assume there's a way to stop automatic vertical alignment with CSS?
To clarify for future viewers, I got it working using:
CSS:
td {
vertical-align: top;
}
HTML:
<table>
<tr>
<td>
Long list of info
Line two
</td>
<td>
Shorter list of info
</td>
</tr>
</table>
(Here's the fiddle)
Hey if you have some questions how to use tables pls look some examples here
http://www.w3schools.com/html/html_tables.asp
http://www.w3schools.com/css/css_table.asp
If you prefer to avoid CSS you can do the same thing inline with the depreciated valign tag. Valign is not supported in HTML5 but is the recommended method if you are working within the context of an HTML email.
<table border="1">
<tr>
<td width="110">
Long list of info Line two
</td>
<td valign="top">
Shorter list of info
</td>
</tr>
</table>
Or you could always use two rows if you can predict and control where your breaks are going to be and want to simplify the markup further.

Form tag won't enclose elements inside a table

I've run into a curious problem; I've got a form inside a <tr>, however the form refuses to wrap any tags inside it. I've made a quick JSFiddle here to play around with. Firebug reports that the form isn't wrapping anything:
The <form> element is greyed out and not wrapping anything. The HTML for this test is below
<table>
<form>
<tr>
<td>Input</td>
<td>Another input</td>
</tr>
<tr>
<td colspan="4"><span>Other stuff</span></td>
</tr>
</form>
<tr>
<td>
Rows not affected by the form
</td>
</tr>
<tr>
<td>
Rows not affected by the form
</td>
</tr>
</table>
As can be seen, the form holds two trs in the written markup. I read here that this is invalid, so my question is can I create a form that holds two or more trs and an arbitrary amount of other elements inside a table? The table has other rows in it not associated with the form, so putting a <form> round the entire table is unhelpful, although seeing as the other rows won't have any inputs for the form (POST request), I suppose a form could be put around the entire table.
Which is a better solution; whole-table wrap, or a working fix for just enclosing the needed rows in a form tag? I know I could put a table inside a td > form, but then the column widths wouldn't be the same in the nested table, which is why I came to ask this question.
You cannot interrupt the <table> structure with any tags besides <thead>, <tfoot>, <tbody>, <tr>, <th>, or <td>. You form tags need to be encapsulated between two <td> or your entire <table> needs to be placed within the <form> tag.
<table>
<tr>
<td>
<form>
...form data...
</form>
</td>
</tr>
</table>
..or..
<form>
<table>
...
</table>
</form>
you can only put a form inside a td basically, so you could put those 2 rows inside a new table that you create inside a td
like ...
<table><tr><td><form><table><tr>...</tr><tr>...</tr></table></form></td></tr><tr>...</tr><tr>...</tr></table>
The <form> tag can only be placed inside a <td> element or outside the <table> in this case.
If I were you, I'd just put the <form> around the whole table since you said there won't be any other forms within it.
Or, you could replace the <table> completely with <div>s instead that use display: table; or display: table-cell;.

Why would someone use invalid html?

I think I found some typos in code I'm supporting and posted it to a local site as a funny example of invalid code, and then someone said that sometimes this invalid usage is correct.
Why would someone might need this code?
<table>
<form>
<tr>
<td></td>
</tr>
</form>
<form>
<tr>
<td></td>
</tr>
</form>
</table>
When can it be better than the following?
<table>
<tr>
<td>
<form></form>
</td>
</tr>
<tr>
<td>
<form></form>
</td>
</tr>
</table>
Or this:
<form>
<table>
<tr>
<td></td>
</tr>
<tr>
<td></td>
</tr>
</table>
</form>
<form>
<table>
<tr>
<td></td>
</tr>
<tr>
<td></td>
</tr>
</table>
</form>
I played with JSFiddle and can't find HTML decision, so maybe that's a reason.
But I think that JavaScript or CSS way would be better.
And then some person said me that sometimes this invalid usage is correct.
By definition, invalid code isn't correct.
Can you please explain me why someone might need this code?
With a single cell per row? There isn't even a half good reason. There shouldn't be a table there in the first place because it wouldn't be tabular data.
If there were multiple cells per row, then it would be nice to be able to have a form per row (for an "edit this entry" thing). It isn't necessary though, as you can give each input a unique name, and then determine which row to process based on which submit button was clicked (since only the clicked submit button will be successful and therefore have its name/value pair submitted to the server).
This is a way to get the two form elements to align with each other using table-based UI alignment. It used to be quite common before CSS was widely supported in browsers.
Today one would do that in CSS with your preferred markup.