表組みのCSSメモ
表組みとCSS
HTML
htmlファイルは次のとおり、linkはCSSファイルのパスを書いておく。
talbleのクラスはCSSファイルを参照。
<!DOCTYPE html> <html> <head> <title>表組み</title> <link rel="stylesheet" href="./css/style.css"> </head> <body> <table class="sample"> <tr> <th>th1</th> <th>th2</th> <th>th3</th> <th>th4</th> </tr> <tr> <td>td1</td> <td>td2</td> <td>td3</td> <td>td4</td> </tr> <tr> <td>td1</td> <td>td2</td> <td>td3</td> <td>td4</td> </tr> <tr> <td>td1</td> <td>td2</td> <td>td3</td> <td>td4</td> </tr> <tr> <td>td1</td> <td>td2</td> <td>td3</td> <td>td4</td> </tr> </table> </body> </html>
CSS
CSSファイルは次のとおり。
コメントは/**/ で行う。
table, th, td { border-collapse: collapse; border: 1px solid #ccc; line-height: 1.5; } /* sampleはhtml側でclassとして指定する*/ table.sample th { width: 150px; padding: 10px; font-weight: bold; vertical-align: top; background: #3f3f3f; color: #ffffff; } table.sample td { width: 350px; padding: 10px; vertical-align: top; } /* 偶数と奇数で切り替える */ tr:nth-child(even) { background: #d9d9d9; }