[CSS] テーブルデザイン

WebDesign

次のような表を表示する CSS です。

Html code

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8" />
    <title>sample</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<link rel="stylesheet" href="style.css" />
  </head>
  <body>
  <table cellspacing="1" cellpadding="6" border="0">
  <tr><td class="head">Category</td><td class="head">Priority</td><td class="head">Summary</td><td class="head">Status</td><td class="head">Assign</td><td class="head">Date</td></tr>
  <tr><td class="row">Hoge</td><td class="row">High</td><td class="row">Test</td><td class="row">New</td><td class="row">Unassigned</td><td class="row">2011/10/16</td></tr>
  <tr><td class="row">Hoge</td><td class="row">High</td><td class="row">Test</td><td class="row">New</td><td class="row">Unassigned</td><td class="row">2011/10/16</td></tr>
  <tr><td class="row">Hoge</td><td class="row">High</td><td class="row">Test</td><td class="row">New</td><td class="row">Unassigned</td><td class="row">2011/10/16</td></tr>
  <tr><td class="row">Hoge</td><td class="row">High</td><td class="row">Test</td><td class="row">New</td><td class="row">Unassigned</td><td class="row">2011/10/16</td></tr>
  <tr><td class="row">Hoge</td><td class="row">High</td><td class="row">Test</td><td class="row">New</td><td class="row">Unassigned</td><td class="row">2011/10/16</td></tr>
  <tr><td class="row">Hoge</td><td class="row">High</td><td class="row">Test</td><td class="row">New</td><td class="row">Unassigned</td><td class="row">2011/10/16</td></tr>
  </table>
  </body>
</html>

CSS code


table {
  border: 1px solid #006699;
  color: #000;
}

td, th {
  font-size:11px;
  font-family: Verdana, Arial, Helvetica, sans-serif;
}

td.head {
  background-color: #003366;
  color: #edf6f9;
  font-weight: bold;
  letter-spacing: 1px;
  text-align: center;
}

td.row {
  background-color: #cad9ea;
  color: #000;
}

td.row:hover {
  background-color: #ececd9;
}

« »

コメントは受け付けていません。