テーブルの枠線の色を指定したい。

質問

http://www.kanzaki.com/docs/html/htminfo16.html
を参考に、

---------------------------------------
<table>
<tr>
<td>りんご</td>
<td>甘酸っぱい</td>
<td>おおむね赤</td>
</tr>
<tr>
<td>なつみかん</td>
<td>かなり酸っぱいと思う</td>
<td>たいてい黄色</td>
</tr>
</table>
---------------------------------------
と言うテーブルに対して、
---------------------------------------
<style>
table {
border-collapse: collapse;
}
td {
border: solid 1px;
padding: 0.5em;
}
</style>
---------------------------------------
と記述して、枠線を付けたのですが、枠線の色を指定する事は出来ますか？
赤にしたいです。ご回答よろしくお願いします。

回答No.2

ORUKA1951 · ベストアンサー

最初は、正しいものを学んだほうが良い様な気がします。summaryとtbodyは推奨ではなく必須です。それを書かなくてもブラウザは表示してくれますが・・
<table summary="果物の一覧" class="list">
<!-- tableの種類訳をするためにclassをつけておくと便利 -->
　<tbody>
　　<tr>
　　　<td>りんご</td><td>甘酸っぱい</td><td>おおむね赤</td>
　　</tr>
　　<tr>
　　　<td>なつみかん</td><td>かなり酸っぱいと思う</td><td>たいてい黄色</td>
　　</tr>
　</tbody>
</table>

table.list{
　border-collapse:collapse;
　border-style:double;
　border-color:red;
　border-width:4px;
　border:double red 4px;/* と、この３行をまとめて書いても良い */
}
table.list td{
　border: solid 1px blue;
　padding: 0.5em;
}

と、スタイルシートを使うとtableの外枠とセルを個別に指定できます。上下左右でデザインを変えることも、内容のないセルの枠線の表示とかも自由自在にデザインできます。CSS3を使えば影をつけたり縁を丸めたり・・

table.list{
border-collapse:collapse;
border:solid red 4px;
box-shadow: 10px 10px 10px rgba(0,0,0,0.4);
}
table.list td{
border: solid 1px blue;
padding: 0.5em;
}
table.list td+td{
border-right-color:red;
}

→8.5 ボーダーのプロパティ（Border properties） ( http://www.swlab.it.okayama-u.ac.jp/man/rec-css2/box.html#border-properties )
→17.6 ボーダー（Borders） ( http://www.swlab.it.okayama-u.ac.jp/man/rec-css2/tables.html#borders )

お礼

ありがとうございました。

回答No.1

torayoshi

border: solid 1px #ff0000;
とすれば良いだけでは？

お礼

簡単にできました！
ありがとうございました。