CODEWITHSUNDEEP
html
tanya
tanya

Reputation: 2985

html - enclosing td inside div

I have a table and want to include a div inside it such that the div encloses some of the table rows. However it's not working.

<table>
<tr><td> one</td></tr>

<div style="color: yellow;">
<tr><td> two</td></tr>
<tr><td> three</td></tr>
</div>

<tr><td> four </td></tr>
</table>

Is it possible to enclose table rows within a div?

Many thanks for any suggestion provided.

Upvotes: 2

Views: 16040

Answers (4)

Gabriele Petrioli
Gabriele Petrioli

Reputation: 196092

That would be invalid HTML.. so not possible.

you could instead add a class to the rows you want and use css to style it.

<table>
<tr><td> one</td></tr>
<tr class="colored"><td> two</td></tr>
<tr class="colored"><td> three</td></tr>
<tr><td> four </td></tr>
</table>

and in css

.colored td{ color: yellow; }

As mentioned in other answers you can use the <tbody> tag w3c docs for grouping, which allows for multiple instances in a table

<table>
    <tr><td> one</td></tr>
    <tbody class="colored">
        <tr><td> two</td></tr>
        <tr><td> three</td></tr>
    </tbody>
    <tr><td> four </td></tr>
    <tbody class="colored">
        <tr><td> five</td></tr>
        <tr><td> six</td></tr>
    </tbody>
</table>

demo http://jsfiddle.net/gaby/n2yWe/

Upvotes: 4

Shadow Wizard
Shadow Wizard

Reputation: 66388

Use the <tbody> tag to group rows together:

<table>
    <tr><td> one</td></tr>
    <tbody style="color: yellow;">
        <tr><td> two</td></tr>
        <tr><td> three</td></tr>
    </tbody>
    <tbody style="color: red;">
        <tr><td> four </td></tr>
    </tbody>
</table>

Test case.

Upvotes: 6

Jan Zyka
Jan Zyka

Reputation: 17888

It is possible (you just did it) but strongly not recommended since according to the w3c spec you cannot nest div under table. The browsers will probably act differently since no defined behaviour is required here.

Upvotes: 1

Guffa
Guffa

Reputation: 700472

No, that is not possible.

The only place where you can put any content in a table is inside the cells.

Perhaps you want a header and a footer in the table? Note that the footer comes before the body:

<table>
  <thead>
    <tr><td> one</td></tr>
  </thead>
  <tfoot>
    <tr><td> four </td></tr>
  </tfoot>
  <tbody style="color: yellow;">
    <tr><td> two</td></tr>
    <tr><td> three</td></tr>
  </tbody>
</table>

Upvotes: 4

Related Questions