角丸とストライプのテーブル

表を表現したいときにtableタグを利用します。また、css3の登場によりtableの行を偶数と奇数に分類できるようになりました。css3未対応のブラウザでもJQueryを使ってストライプ（しましま）デザインにすることができます。

完成イメージ

テーブルの装飾

1.テーブル全体

角丸デザインにするには、css3の「border-radius」を使います。
ただし、「border-radius」の指定だけでは足りないため注意してください。
以下のようにセルにborder（線）を指定している場合、「border-collapse」の値を変更する必要があります。

border-collapseをsepareteに設定する

「border-collapse」の値が「collapse」のままだと、角丸になりません。
「border-collapse」の値を「separete」にすれば角丸になります。

border-spacingを0に設定する

border-collapseをsepareteに設定すると、セルとセルの間に余白ができてしまいます。
border-spacingを0に設定して余白を除去します。
ただし、IE7ではborder-spacingが使えません。
cssハックを利用し、IE7のみに「border-collapse: collapse」を指定します。

			<table>
				<thead>
				<tr>
					<th>A</th><th>B</th>
				</tr>
				</thead>
				<tbody>
				<tr>
					<td>A1</td>
					<td>B1</td>
				</tr>
				<tr>
					<td>A2</td>
					<td>B2</td>
				</tr>
				<tr>
					<td>A3</td>
					<td>B3</td>
				</tr>
				</tbody>
			</table>

table {
	margin-bottom: 1em;
	width: 100%;
	border: 1px solid #ccc;
	border-spacing: 0;
	border-collapse: separate;
	border-radius: 5px;
	background: #fff;
	color: #666;
	*border-collapse: collapse;
}

2.th、td要素のborder指定

テーブルのセル（th、td）にborderを指定します。
四辺にborderを引くのではなく、左辺と上辺にborderを指定します。

td,
th{
	border-top: 1px solid #ccc;
	border-left: 1px solid #ccc;
	vertical-align: top;
	padding: .5em 1em;
}

3.不必要なborderを消す

2.の方法ですと、tableの上辺と左辺のborderが2重になります。
不要なborderを消します。
1行目のth要素はborder-topをnoneにします。
一番左の列のth、td要素はborder-leftをnoneにします。
一番上、一番左を指定する場合は、「:first-child」擬似クラスを利用します。
一番上を指定するときは、「tr:first-child th」を指定します。
一番左を指定するときは、「td:first-child, th:first-child」を指定します。

tr:first-child th{
	border-top: none;
}

td:first-child,
th:first-child {
    border-left: none;
}

thead、tbodyを記述した場合の注意点

table要素の中に、theadやtbodyを記述することがよくあります。
そのとき、first-childの場所が変わりますので注意して下さい。

・table要素（theadやtbodyを記述しない場合）の「first-child」のtr

・thead要素の「first-child」のtr

・tbody要素の「first-child」のtr

theadやtbodyがある場合、「tr:first-child」と記述するとそれぞれの要素の一番最初の行が指定されます。
thead、tbodyを付けた場合、セレクタを以下のように書き換えましょう。

thead tr:first-child th{
	border-top: none;
}

tbody tr:first-child th{
	border-top: none;
}

4.th要素に背景指定

th要素に背景を指定します。
CSSグラデーションと、box-shadowで白のハイライトを入れます。
すると、th要素に背景を指定すると、tableの角丸の上に四角形th要素がのります。

th {
	background:#f7e1e5;
	background-image: -webkit-gradient(linear, left top, left bottom, from(#f7e1e5), to(#eed5db));
	background-image: -moz-linear-gradient(top center, #f7e1e5, #eed5db);
	background-image: -o-linear-gradient(top, #f7e1e5, #eed5db);
	box-shadow: 0 1px rgba(255, 255, 255, 1) inset;
	color: #80555c;
	text-shadow: 0 1px 1px #fff;
	font-weight: bold;
}

5.四隅を全て角丸にする

背景を指定しますと、角丸のborderが欠けてるように見えます。
th要素自体もborder-radiusで角丸にします。

・左上の角丸

thead tr:first-child th:first-child {
    border-radius: 5px 0 0 0;
}

・右上の角丸

thead tr:first-child th:last-child{
	border-radius: 0 5px 0 0;
}

・左下の角丸

tbody tr:last-child td:first-child {
    border-radius: 0 0 0 5px;
}

・右下の角丸

tbody tr:last-child td:last-child {
    border-radius: 0 0 5px 0;
}

6.行をストライプにする

行数が多い場合、行がストライプをいれます。
すると、視覚上ユーザーに優しいページとなります。
CSS3では、「:nth-child()」擬似クラスを使って偶数行・奇数行を指定します。

tr:nth-child(even){
	background: #f8f8f8;
}

IE7、8でストライプにするには？

jQueryを利用し、奇数行・偶数行を指定します。
jQueryで偶数行にeven、奇数行にoddというクラスをつけます。

$(function(){
		$("table tr:even").addClass("even");
		$("table tr:odd").addClass("odd");
});

tr.even{
	background: #f8f8f8;
}

列をストライプにするには？

「colgroup」要素を使えば、cssで列を装飾することができます。

<table id="sample">
  <colgroup class="first"></colgroup>
  <colgroup class="c_a"></colgroup>
  <colgroup class="c_b"></colgroup>
  <colgroup class="c_c"></colgroup>
  <colgroup class="c_d"></colgroup>
  <colgroup class="c_e"></colgroup>
  <thead>
    <tr>
      <th>
      </th>
      <th>A</th>
      <th>B</th>
      <th>C</th>
      <th>D</th>
      <th>E</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th>border-radius</th>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
    </tr>
    <tr>
      <th>:first-child</th>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
    </tr>
    <tr>
      <th>:last-child</th>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
    </tr>
    <tr>
      <th>:nth-child</th>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td colspan="6">メッセージ</td>
    </tr>
  </tfoot>
</table>

table {
	margin-bottom: 1em;
	width: 100%;
	border: 1px solid #ccc;
	border-spacing: 0;
	border-collapse: separate;
	border-radius: 5px;
	background: #fff;
	color: #666;
	*border-collapse: collapse;
}

td,
th{
	border-top: 1px solid #ccc;
	border-left: 1px solid #ccc;
	vertical-align: top;
	padding: .5em 1em;
}

td:first-child,
th:first-child {
	border-left: none;
}

td:first-child{
	white-space: nowrap;
}

thead tr:first-child th{
	border-top: none;
}

th {
	background:#f7e1e5;
	background-image: -webkit-gradient(linear, left top, left bottom, from(#f7e1e5), to(#eed5db));
	background-image: -moz-linear-gradient(top center, #f7e1e5, #eed5db);
	background-image: -o-linear-gradient(top, #f7e1e5, #eed5db);
	box-shadow: 0 1px rgba(255, 255, 255, 1) inset;
	color: #80555c;
	text-shadow: 0 1px 1px #fff;
	font-weight: bold;
}

#sample tr:nth-child(even){
	background: #none;
}

tbody th{
	background: none;
}

#sample tr:hover {
	background: #fbf7e3;
}

colgroup.c_b,
colgroup.c_d{
	background: #e7e7e7;
}

7.マウスを乗せると背景が変わる

マウスのカーソルを乗せると、行の背景色が変わるようにします。

tr:hover {
	background: #fbf7e3;
}