CSS Table



CSS Tutorial  >  Table

In HTML code, you will commonly see the table tag followed by border, cellpadding, and cellspacing attributes. This would be unnecessary if we use CSS.

The table, th, tr, and td selectors can use many of the properties we have defined previously in this tutorial such as, but not limited to, those for text, font, border, color, and background.

Let's take a look at one example. Assuming that we want the following style applied to the table:

  • Table: No outer border, font is arial, font size is 14px.
  • Heading: Background is yellow.
  • Element: There is a black solid line beneath every element in the table.
  • For scores below 60, create a separate class that would make the font color red.

    We would apply the following stylesheet:

    table {
      border: 0;
      font-family: arial;
      font-size:14px;
    }
    th {
      background-color:yellow;
    }
    td {
      border-bottom:1 solid #000000;
    }
    .fail {
      color:#FF0000;
    }

    Given this style, the HTML code below:

    <table>
      <tr>
        <th>Student Name</th>
        <th>Score</th>
      </tr>
      <tr>
        <td>Stella</td>
        <td>85</td>
      </tr>
      <tr>
        <td>Sophie</td>
        <td>95</td>
      </tr>
      <tr>
        <td>Alice</td>
        <td class="fail">55</td>
      </tr>
    </table>

    would render the following:

    Student Name Score
    Stella 85
    Sophie 95
    Alice 55

    border-collapse

    There is one property related to a table that we want to mention here, and that is the border-collapse property. The border-collapse property essentially replaces the cellspacing=0 declaration. Let's looks at the example below:

    With this CSS declaration,

    table {
      border:0;
      border-collpase:collpase;
      width:200px;
    }

    tr {
      border-bottom:1px solid #000;
    }

    the HTML code below,

    <table>
      <tr><td>Year</td><td>Income</td></tr>
      <tr><td>2006</td><td>35.2M</td></tr>
      <tr><td>2007</td><td>40.1M</td></tr>
    </table>

    would render the following:

    YearIncome
    200635.2M
    200740.1M

    Notice that the underline between the Year column and the Income column are continuous. The is the effect of border-collapse:collapse.

    Next: CSS Position




    Copyright © 2024   1keydata.com   All Rights Reserved   Privacy Policy   About   Contact
  • AdBlock Detected!

    Our website is made possible by displaying ads to our visitors. Please supporting us by whitelisting our website.