0

My id #kiwi doesn't seem to work. Could anyone explain me why it is not working? I've been searching for some help but couldn't find it. It doesn't even work when I try to class it too.

<head>
    <title>this is the title sucker</title>

    <style>
        #kiwi {background-color:green;}
    </style>
</head>

<body>      
    <table border="1">

        <tr>
            <th colspan="3">Statistics</th>
        </tr>

        <tr>
            <th colspan="1">Car model name</th>
            <th colspan="0">Vegetables</th>
            <th>Delicious Fruits</th>
        </tr>


        <div id="kiwi">
        <tr>
            <td>Jaguar</td>
            <td>Tomato</td>
            <td>Kiwi</td>
        </div>
        </tr>
        <tr>
            <td>BMW</td>
            <td>Potato</td>
            <td>Apples</td>
        </tr>
        <tr>
            <td>AUDI</td>
            <td>Cabbage</td>
            <td>Watermelon</td>
        </tr>

    </table>
</body>

Edgaras
  • 69
  • 4

3 Answers3

1

you should assign the id to <tr> tag and not put it in a div

This works:

<head>
    <title>this is the title sucker</title>
    <style>
        #kiwi {background-color:green;}
    </style>
</head>

<body>      
    <table border="1">

        <tr>
            <th colspan="3">Statistics</th>
        </tr>

        <tr>
            <th colspan="1">Car model name</th>
            <th colspan="0">Vegetables</th>
            <th>Delicious Fruits</th>
        </tr>

        <tr id="kiwi">
            <td>Jaguar</td>
            <td>Tomato</td>
            <td>Kiwi</td>

        </tr>

        <tr>
            <td>BMW</td>
            <td>Potato</td>
            <td>Apples</td>
        </tr>
        <tr>
            <td>AUDI</td>
            <td>Cabbage</td>
            <td>Watermelon</td>
        </tr>

    </table>
</body>
Alaleh
  • 1,008
  • 15
  • 27
0

In fact it does work. It is the matter of div content.

Instead of

    <div id="kiwi">
    <tr>
        <td>Jaguar</td>
        <td>Tomato</td>
        <td>Kiwi</td>
    </div>
    </tr>

Try for example:

    <tr>
        <td>Jaguar</td>
        <td>Tomato</td>
        <td><div id="kiwi">Kiwi</div></td>
    </tr>
Michal Lonski
  • 877
  • 1
  • 11
  • 20
0

Edit: As it turns out, you can use a div inside a tr as well. So you can either place it inside the td tag, as shown below. Or if you want to color the whole row, you can put id on 'tr' itself, as suggested by others here.

There are a few things there. First of all, you cannot put a<div> directly inside a <table> tag. You have to place it inside a <th> or <td> tag.

See more here : div inside table

Also, you <div> tag is opened before <tr>, but closed after it, which is not correct. Always open and close tags in correct order.

You can do something like this:

<tr>
        <td>Jaguar</td>
        <td>Tomato</td>
        <td><div id="#kiwi">Kiwi</div></td>
</tr>
Yuvraj Jaiswal
  • 1,605
  • 13
  • 20