【ホームページ作成】スタイルシートで表を見やすく装飾！

/* ▼表全体の装飾▼ */
table.noveltable {
   border-collapse: collapse;
   border: 2px #cc0000 solid;
   font-size: 90%;
   font-family: Verdana,sans-serif;
}

/* ▼表のセル(全部)の装飾▼ */
table.noveltable th,
table.noveltable td {
   padding: 0.3em;
   border-style: solid dashed;
   border-color: #cc0000;
   border-width: 1px;
}

/* ▼表のヘッダ(上部)の装飾▼ */
table.noveltable thead th {
   border-bottom: 3px double #cc0000;
   background-color: #ffdddd;
   letter-spacing: 0.15em;
}

/* ▼表のフッタ(下部)の装飾▼ */
table.noveltable tfoot th {
   background-color: #ffffcc;
   border-right: 1px #cc0000 solid;
   letter-spacing: 2em;
   color: #cc0000;
}
table.noveltable tfoot td {
   color: red;
   font-weight: bold;
}
table.noveltable tfoot th,
table.noveltable tfoot td {
   border-top: 2px solid #cc0000;
}

/* ▼価格セルの装飾▼ */
table.noveltable td.price {
   text-align: right;
}

/* ▼作品名セルの装飾▼ */
table.noveltable tbody th {
   text-align: left;
}