Table and CSS

This example shows draws a formatted table.

by 17745709

HTML

<div class="labels">
  <p>First</p>
  <p> Last</p>
  <p> Position</p>
</div>
<p class="labelend" />




<table>
    <tr>
        <th>First</th>
        <th>Last</th>
        <th>Position</th>
    </tr>
    <tr>
        <td>Jane</td>
        <td>Doe</td>
        <td>Professor</td>
    </tr>
    <tr>
         <td>John</td>
        <td>Smith</td>
        <td>Senior Lecturer</td>
    </tr>
</table>

CSS

.labels>p {
  vertical-align:middle;
  float:left;
  margin:2px 0px 0px 2px
}

.labels{
  width:372px;
  margin:0;
  padding:0;
}

.labels >p, td{
  background-color:darkblue;
  color:white;
  
}

.labels >p, th, thd{
    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;
}


.tableend{clear:both;}

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

td {
    background-color: lightgray;
    color: black;
}

th, td {
    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;
}