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 1keydata.com 2007, 2008, All Rights Reserved.   Privacy Policy



  • CSS Tutorial
    CSS Syntax
    Apply CSS
    CSS Media Types
    CSS Cascade
    CSS Inheritance
    CSS Class ID
    CSS Div Span
    CSS Length Units

    CSS Box Model
    CSS Margin
    CSS Border
    CSS Padding
    CSS Background
    CSS Color
    CSS Font
    CSS Link
    CSS List
    CSS Table
    CSS Position
    CSS Text
    CSS Float
    CSS Clear
    CSS Cursor

    CSS Codes

    Resources