Styling text inside tr? - html

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.

Related

Wrapper for multiple <tbody>?

For specific css requirements I'm using multiple <tbody> tags in my table design which looks something like this:
Use of multiple tbody tags
But I also require a wrapper for multiple tbody tags (something like a common tbody parent) such that this wrapper can be scrolled in order achieve the following effect:
A common tbody which can be scrolled
How do I achieve the latter srolling effect in the former one?
(P.S.: I know this can be done through nested table approach, but I'm looking for other alternatives if any)
As mentioned in the comments by FelipeAls and others that a <tbody> tag can be wrapped only by a <table> tag, I tried wrapping <thead> and <tbody>s in separate tables to create the desired effect in the following way:
<table>
<thead>
...
</thead>
</table>
<table>
<tbody>
...
</tbody>
<tbody>
...
</tbody>
<tbody>
...
</tbody>
</table>
This solved the issue.
Here's a Working Demo.
You cannot have a wrapper for tbody elements inside a table. The tbody element itself is a wrapper for tr elements. HTML syntax does not allow any other container for tbody but table. What matters more is that this syntax rules is actually enforced by the way browsers parse HTML.
If you try to use, say, a div element as a wrapper (the most reasonable approach), it will actually create a div element in the DOM, but an empty one, and before the table. All the tbody and tr elements are inserted into the table element; they are effectively extracted from the div element, which thus becomes empty, unless it contains something else than table-related elements.
An illustration, using intentionally invalid markup:
<style>
.x { outline: solid red }
</style>
<table>
<tbody>
<tr><td>foo
</tbody>
<div class=x>
FOO!
<tbody>
<tr><td>foo2
</tbody>
<tbody>
<tr><td>foo3
</tbody>
</div>
<tbody>
<tr><td>The end
</tbody>
</table>
The conclusion is that you need a different approach. The most obvious one is to use just a single tbody element. If this is not feasible, you should explain why, but this would be a topic for a new question.

Is it necessary to put the <td> inside a <tr>

<TR class="bcgrndClr">
<span class="Title">
My title
</span>
</TR>
I wrote this part, but the background color is not coming in chrome and other browsers, where as working fine in "IE".
so is it necessary to put a <td> before <span>
or should i go for <th> instead of <tr>
or how else should i give the title (with some conditions) to this particular table
TH and TD are interchangable, but not TH and TR. Thats how i been using it at least.
you can do something like:
<tr><td colspan="2"><span>Hello World</span></td></tr>
colspan is used to make a TD element stretch across multiple row elements.
Yes, you need <td>. Browsers will still try to render the table if you write invalid HTML, but the rendering will be inconsistent between browsers.
<th> can take the place of <td> if the cell is a header cell. It does not take the place of <tr> which is always required.
You can always check the HTML5 spec if you are in doubt about which elements are required and which are optional:
The tr element represents a row of cells in a table. Permitted
contents Zero or more of: one td element, or one th element
If you look at the HTML 4 spec or HTML5 Spec, you will see
HTML 4:
<!ELEMENT TR - O (TH|TD)+ -- table row -->
<!ATTLIST TR -- table row --
%attrs; -- %coreattrs, %i18n, %events --
%cellhalign; -- horizontal alignment in cells --
%cellvalign; -- vertical alignment in cells --
>
HTML5:
4.9.8 The tr element
Content model: Zero or more
td, th, and script-supporting elements
Notice the TH and TD? Those are the only two child elements allowed.
What happens when you add an invald element to the TR is up to the browser. Some will try to figure out what you are doing, others will remove it from the flow and add it after. Write valid code so the browser does not have to guess.
Since you have a class of title, it seems like you should not be using a row. If you want a title row on the table, you want to use the <caption> element.
From MDN:
The HTML <caption> Element (or HTML Table Caption Element) represents
the title of a table. Though it is always the first descendant of a
<table>, its styling, using CSS, may place it elsewhere, relative to
the table.
Basic usage:
<table summary="Description Text">
<caption>My Table Of Numbers</caption>
<thead>
<tr>
<th>C 1</th>
<th>C 2</th>
<th>C 3</th>
</tr>
</thead>
<tbody>
<tr>
<td>1-1</td>
<td>1-2</td>
<td>1-3</td>
</tr>
<tr>
<td>2-1</td>
<td>2-2</td>
<td>2-3</td>
</tr>
</tbody>
<tfoot>
<tr>
<th>C 1</th>
<th>C 2</th>
<th>C 3</th>
</tr>
</tfoot>
</table>
JSFiddle: http://jsfiddle.net/vM688/
According to spec, a tr can contain only th and td elements. As other have said, don't be lazy and write the few extra characters to make your HTML valid
Use
<table>
<thead>
<tr>
<!-- text b/w <th></th> will bold and center aligned by default -->
<th> You title here </th>
</tr>
</thead>
<tbody>
<!-- Content of you table here -->
</tbody>
</table>
A td tag stands for table data whereas a tr tag is a table row.
So you make a row in HTML and then add a td to it the number of tds you add decides the number of columns in that row.
A th tag stands for table heading which can be used in a row.
The background color will show if you add the span tag inside the td. Your code will look somewhat like this:
<table><tr class="bg-color"><td><span class="title">My title</span></td></tr></table>
And the css should go like:
.bg-color{background:#ff0000;}

HTML Linking a whole table tbody with an anchor

I have the following code:
<tbody>
<tr class="listing_left">
<td>Info Here</td>
</tr>
<tr class="listing_right">
<td>Info Here</td>
</tr>
</tbody>
It is being pulled dynamically so that is for each product. So if I have 20 products, it shows that code 20 different times for each product.
I need each of those to link to a specific link. I tried wrapping the whole tbody in an anchor and that did not work. I tried wrapping the individual tr's in an anchor and that did not work.
If I wrap each TD in an anchor then that will work but the anchor is only for the specific text, it doesn't expand to the entire TR, which I need.
Any suggestions?
Well you can only have anchor tag within the td tag so I would suggest that you change your layout so you use divs instead of tables
Then you can do something like this:
<div>
<div class="listing_left">
Info Here
</div>
<div class="listing_right">
Info Here
</div>
</div>

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;.

Hierarchical html table, putting last td on next line

I'm creating a simple hierarchical table with html and CSS and I'm getting into trouble with formatting the last td element with class .child to be on next line.
I want to have the nested table inside table > tr > td.child becase each table can be sorted and javascript sorters don't implement any grouping of rows (my problem of having nested table could be easily solved by moving the .child > table element into next table > tr however this would break the nice nesting structure)
Is there a way to put td.child on next row with css?
html sample:
<table>
<tr>
<td>I have</td>
<td>1</td>
<td>pie</td>
<td class="child">
<table>
<tr>
<td>I have</td>
<td>1</td>
<td>pie</td>
</tr>
</table>
</td>
</tr>
</table>
You could do something like this . You'd need to be careful cross browser though (only checked on Chrome)