HTML Element Style How to - Add bottom line to table caption








Question

We would like to know how to add bottom line to table caption.

Answer


<!DOCTYPE html>
<html>
<head>
<style type='text/css'>
table {<!--from w w  w  .  ja v  a  2s . c om-->
  width: 500px;
  border-style: solid;
  border-width: thin;
  border-collapse: collapse;
}

caption {
  text-decoration: underline;
  margin: 10px;
}

th {
  height: 40px;
  padding: 10px;
  border-bottom-style: solid;
  border-width: thin;
}

table tbody tr {
  text-align: center;
}
</style>
</head>
<body>
  <table>
    <caption>File Download Links</caption>
    <thead>
      <tr>
        <th>Category</th>
        <th>Link Desc.</th>
        <th>Download Link</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>School</td>
        <td>tutorial1.html</td>
        <td><a href="">tutorial1.html</a></td>
      </tr>
      <tr>
        <td>School</td>
        <td>tutorial1</td>
        <td><a href="">tutorial1.html</a></td>
      </tr>
      <tr>
        <td>School</td>
        <td>tutorial2</td>
        <td><a href="">tutorial2.html</a></td>
      </tr>
      <tr>
        <td>School</td>
        <td>tutorial3</td>
        <td><a href="">tutorial3.html</a></td>
      </tr>
      <tr>
        <td>School</td>
        <td>tutorial4</td>
        <td><a href="">tutorial4.html</a></td>
      </tr>
      <tr>
        <td>School</td>
        <td>tutorial5</td>
        <td><a href="">tutorial5.html</a></td>
      </tr>
    </tbody>
  </table>
  </section>
</body>
</html>

The code above is rendered as follows: