CODEWITHSUNDEEP
htmlcss
Nebula
Nebula

Reputation: 159

background color of table cells using css and html

I've coded a table I want it to be like this : even and odd rows have different colors and first row and column have the same color ; I used colgroup for coloring first column but it doesn't work.

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>Untitled Document</title>

    <style type="text/css">
        tr.odd{background-color:#f9f;}
        tr.even{background-color:#fcf;}
    </style>

</head>

<body>
    <table width="200" border="1">
        <colgroup span="1" style="background:purple;"></colgroup>

        <tr style="background:purple;">
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
        </tr>
        <tr class="odd">
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
        </tr>
        <tr class="even">
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
        </tr>
        <tr class="odd">
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
        </tr>
    </table>

</body>
</html>

Upvotes: 2

Views: 29443

Answers (3)

chrisM
chrisM

Reputation: 338

You can use CSS nth-child (IE9+), which also removes the need for even and odd classes in the HTML.

    <!doctype html>
    <html>

    <head>
        <meta charset="utf-8">
        <title>Untitled Document</title>
        <style type="text/css">
            td {background-color:#f9f;}
            tr:nth-child(even) > td {background-color:#fcf;}
            tr > td:first-child {background-color:purple;}
        </style>
    </head>

    <body>
        <table width="200" border="1">
            <tr>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
            </tr>
            <tr>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
            </tr>
            <tr>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
            </tr>
            <tr>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
            </tr>
        </table>

    </body>

    </html>

Upvotes: 1

user2182349
user2182349

Reputation: 9782

You can use the even and odd rules of the nth-child pseudoclass

tr:nth-child(even) {background: #FCF}
tr:nth-child(odd) {background: #F9F}

Followed by:

td:first-of-type,
tr:first-of-type {background: purple}

Upvotes: 1

KiiroSora09
KiiroSora09

Reputation: 2287

Maybe this is what you wanted.

CSS

table tr td:first-of-type {background-color: purple !important;}


<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style type="text/css">
tr.odd{background-color:#f9f;}
tr.even{background-color:#fcf;}
table tr td:first-of-type {background-color: purple !important;}
</style>
</head>

<body>
<table width="200" border="1">
<colgroup span="1" style="background:purple;"></colgroup>

  <tr style="background:purple;">
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr class="odd">
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr class="even">
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr class="odd">
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
</table>

</body>
</html>

Upvotes: 2

Related Questions