Table background : table : Table Style HTML CSS TUTORIALS


HTML CSS TUTORIALS » Table Style » table »

 

Table background


 



<!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" xml:lang="en" lang="en">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  <title></title>

  <style>
table {
  width: 90%;
  margin: auto;
  font-family: "Lucida Grande", Verdana, Helvetica, Arial, sans-serif;
  font-size: .9em;
  line-height: 1.4em;
  border-collapse: collapse;
}

caption {
  caption-side: bottom;
  line-height: 4em;
  font-family: Georgia, "Times New Roman", serif;
  font-size: .85em;
  font-style: italic;
}

tr {
  border-bottom: 1px solid #999;
}

tr.odd {
  background-color: #dfdfdf;
}

th {
  text-align: left;
  background-color: #666;
  color: #fff;
  font-weight: normal;
  border: 1px solid #666;
  padding: 0 .5em;
}

td {
  color: #333;
  border-left: 1px solid #999;
  border-right: 1px solid #999;
  padding: 0 .5em;
}
</style>
</head>

<body>

  <table summary="">
    <caption>editors</caption>
    <colgroup>
      <col class="odd" id="name" />
      <col id="affiliation" />
      <col class="odd" id="url" />
      <col id="role" />
    </colgroup>
    <thead>
      <tr>
        <th scope="col">N</th>
        <th scope="col">A</th>
        <th scope="col" abbr="URL">W</th>
        <th scope="col">R</th>
      </tr>
    </thead>
    <tbody id="authors">
      <tr class="odd">
        <td scope="row">J</td>
        <td>W</td>
        <td>h</td>
        <td>A</td>
      </tr>
      <tr>
        <td scope="row">I</td>
        <td>A</td>
        <td>h</td>
        <td>A</td>
      </tr>
      <tr class="odd">
        <td scope="row">D</td>
        <td>W</td>
        <td>h/</td>
        <td>A</td>
      </tr>
    </tbody>
    <tbody id="editors">
      <tr>
        <td scope="row">C</td>
        <td>A</td>
        <td>h</td>
        <td>E</td>
      </tr>
      <tr class="odd">
        <td scope="row">W</td>
        <td>A</td>
        <td>h</td>
        <td>T</td>
      </tr>
    </tbody>
  </table>

</body>
</html>

 



HTML code for linking to this page:

Follow Navioo On Twitter

HTML CSS TUTORIALS

 Navioo Table Style
» table