Table and CSS

This example shows draws a formatted table.

by Justin Harker

HTML

<class>
    <class1>
        <th>First</th>
        <th>Last</th>
        <th>Position</th>
    </class1>
    <class2>
        <td>Jane</td>
        <td>Doe</td>
        <td>Professor</td>
    </class2>
    <class3>
         <td>John</td>
        <td>Smith</td>
        <td>Senior Lecturer</td>
    </class3>
</class>

CSS

class {
    font-weight: bold;
    background-color: darkblue;
    color: white;
}

class1 {
    display: block; 
    background-color: darkblue;
    color: white;
}

class2, class3 {
    display: block; 
    float: left;
    background-color: lightgray;
    color: black;
    border-width: 1px;   /* contributes 2 to width and height   */
    padding: 10px;       /* contributes 20 to width and height  */
    font-size: 16px;     /* contributes 16px to veritcal height */
    width: 100px;
    text-align: center;
    border: 1px solid black;
}