CODEWITHSUNDEEP
htmlcsshtml-table
2339870
2339870

Reputation: 1487

Styling text inside tr?

This is my simplified markup:

<table class="kOverzicht kOverzichtFirst">
    <tr>
        woensdag 26&#47;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?

Upvotes: 1

Views: 5483

Answers (5)

Jukka K. Korpela
Jukka K. Korpela

Reputation: 201658

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.

Upvotes: 0

skzi
skzi

Reputation: 373

You should use td instead. For example,

<table class="kOverzicht kOverzichtFirst">
<tr>
    <td style="color:red;">
    woensdag 26&#47;02
    </td>
</tr>

Alternatively,

    <style>.kOverzicht td {color:red;}</style>

<table class="kOverzicht kOverzichtFirst">
<tr>
    <td>
    woensdag 26&#47;02
    </td>
</tr>

Upvotes: 1

mohamedrias
mohamedrias

Reputation: 18566

I would suggest you to wrap the text inside a td

<table class="kOverzicht kOverzichtFirst">
    <tr>
        <td>woensdag 26&#47;02</td>
    </tr>
</table>

Then use the following css:

table.kOverzicht td {
   // define your css here
}

Upvotes: 1

Yuki
Yuki

Reputation: 29

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.

Upvotes: 1

Ballbin
Ballbin

Reputation: 727

You need a <td> inside of the <tr>

<table class="kOverzicht kOverzichtFirst"> <tr> <td>woensdag 26&#47;02</td> </tr> </table>

<tr> tag just to define a table row.. A table cell <td> where the data is contained.

Upvotes: 2

Related Questions