Use table cell border to highlight total : table data : Table Style HTML CSS TUTORIALS

HTML CSS TUTORIALS » Table Style » table data »

Use table cell border to highlight total


 




<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
table {
 border-collapse: collapse; 
 border: 5px solid #444;
}
td {
 padding: 4px;
}
th {
 color: white;
 background-color: #00B3FF;
}
td, th+th {
 border: 2px solid #666;
}
td+td {
 border: 2px solid #ccc;
 text-align: center;
}
td#winner {
 border: 5px dotted #999;
}
</style>
</head>

<body>
  <table cellspacing="15">
    <tr>
      <th colspan="4">General</th>
    </tr>

    <tr>
      <th></th>

      <th>Estimate</th>

      <th>Lower Bound</th>

      <th>Upper Bound</th>
    </tr>

    <tr>
      <td>Total population</td>

      <td>272,091</td>

      <td>1234</td>

      <td>1234</td>
    </tr>

    <tr>
      <td colspan="4">Sex</td>
    </tr>

    <tr>
      <td>Male</td>

      <td>129,179</td>

      <td>127,670</td>

      <td>131,908</td>
    </tr>

    <tr>
      <td>Female</td>

      <td id="winner">142,302</td>

      <td>140,183</td>

      <td>144,421</td>
    </tr>
  </table>
</body>
</html>