Add padding for table header and table cell : table header : Table Style HTML CSS TUTORIALS

HTML CSS TUTORIALS » Table Style » table header »

Add padding for table header and table cell


 


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
  <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  <title></title>
  <style type="text/css" media="screen">
  div {
    margin-bottom: 30px;
  }
  #divID table { 
    border-top: 1px solid #999;
    border-left: 1px solid #999;
    border-collapse: collapse;
  } 
  #divID th, #divID td { 
    padding: 10px;
    border-right: 1px solid #999;
    border-bottom: 1px solid #999;
  } 
  </style>
</head>

<body>


<div id="divID">
<table summary="Summary goes here">
  <caption>This is the title of the table</caption>
  <tr>
    <th>Year</th>
    <th>Opponent</th>
    <th>Item 3</th>
  </tr>
  <tr>
    <td>1918</td>
    <td>Item A</td>
    <td>75-51</td>
  </tr>
  <tr>
    <td>1916</td>
    <td>Item B</td>
    <td>91-63</td>
  </tr>
  <tr>
    <td>1915</td>
    <td>Item C</td>
    <td>101-50</td>
  </tr>
  <tr>
    <td>1912</td>
    <td>Item D</td>
    <td>105-47</td>
  </tr>
</table>
</div>

</body>
</html>