シンプルな表(table)を使う時用のメモ書き
1.線のみ
border-collapse: collapse; で線の重ね合わせているだけで特に何の工夫も無い。
<style>
.table_test1{
border-collapse: collapse;
}
.table_test1 th{
border: 1px solid #999;
}
.table_test1 td{
border: 1px solid #999;
}
</style>
2.タイトル行の色変え
1番にタイトル行の色指定をしただけだが、個人的にはこれが最も簡単で見やすいので下書の時に多用している。
<style>
.table_test2{
border-collapse: collapse;
}
.table_test2 th{
background-color: #ddd;
border: 1px solid #999;
}
.table_test2 td{
border: 1px solid #999;
}
</style>
3.線種と太さ
外枠とタイトル行の下側を太線にし、表内の縦線は点線で横線は破線を使っている。
点線と破線は色が薄く見えるので若干濃いめのカラー指定をした方が良いかもしれない。
<style>
.table_test3{
border-collapse: collapse;
border: 3px solid #999;
}
.table_test3 th{
border-bottom: 2px solid #999;
border-left: 1px dotted #999;
}
.table_test3 td{
border-bottom: 1px dashed #999;
border-left: 1px dotted #999;
}
</style>
例で使ったテーブルのhtml、★マークには1～3の番号を入れる。
<table class="table_test★"> <tr><th>タイトル1</th><th>タイトル2</th><th>タイトル3</th></tr> <tr><td>内容1-1</td><td>内容2-1</td><td>内容3-1</td></tr> <tr><td>内容1-2</td><td>内容2-2</td><td>内容3-2</td></tr> <tr><td>内容1-3</td><td>内容2-3</td><td>内容3-3</td></tr> </table>
※超個人的なメモ（実際の利用の時には）
・thとtdに「padding: 5px;」を追加。(5pxに意味は無い)
・tableを横方向(行単位)で使う時は、上揃え（ vertical-align: top; ) を指定する。
指定しないとセル内のコンテンツは高さに対して中央に表示されるので、コンテンツの高さが違うと整って見えない。