2018/10/03
料金表や、会社概要など、テーブルレイアウトをする事があります。
そこで、ストック用にCSSでレイアウトするテーブルを作りました。
とりあえずカスタマイズしやすいように、シンプルな感じです。
ご自由にカスタムしてお使い下さい♪
TABLE-A
HTMLソース
<table class="table-a"> <tbody> <tr> <th></th> <th>内容</th> <th>内容</th> <th>内容</th> </tr> <tr> <th>内容</th> <td>TEXT</td> <td>TEXT</td> <td>TEXT</td> </tr> <tr> <th>内容</th> <td>TEXT</td> <td>TEXT</td> <td>TEXT</td> </tr> <tr> <th>内容</th> <td>TEXT</td> <td>TEXT</td> <td>TEXT</td> </tr> </tbody> </table>
CSS
.table-a { border-collapse: collapse; width: 400px; border: 1px solid #CCC; font-size: 12px; margin: 20px; text-align: left; } .table-a th { border: 1px solid #DDD; color: #333; background-color: #D5FAFB; font-weight: bold; padding: 10px; } .table-a td { border: 1px solid #DDD; padding: 10px; color: #666; }
TABLE-B
HTMLソース
<table class="table-b"> <tbody> <tr> <th>内容</th> <td>TEXT</td> <td>TEXT</td> <td>TEXT</td> </tr> <tr> <th>内容</th> <td>TEXT</td> <td>TEXT</td> <td>TEXT</td> </tr> <tr> <th>内容</th> <td>TEXT</td> <td>TEXT</td> <td>TEXT</td> </tr> <tr> <th>内容</th> <td>TEXT</td> <td>TEXT</td> <td>TEXT</td> </tr> </tbody> </table>
CSS
.table-b { border-collapse: collapse; width: 400px; font-size: 12px; margin: 20px; text-align: left; } .table-b th { color: #FFF; background-color: #099; font-weight: bold; padding: 10px; border-bottom: 1px solid #CCC; } .table-b td { padding: 10px; color: #666; border-bottom: 1px solid #CCC; }
TABLE-C
HTMLソース
<table class="table-c"> <tbody> <tr> <th>内容</th> <th>内容</th> <th>内容</th> <th>内容</th> </tr> <tr> <td>TEXT</td> <td>TEXT</td> <td>TEXT</td> <td>TEXT</td> </tr> <tr> <td>TEXT</td> <td>TEXT</td> <td>TEXT</td> <td>TEXT</td> </tr> <tr> <td>TEXT</td> <td>TEXT</td> <td>TEXT</td> <td>TEXT</td> </tr> </tbody> </table>
CSS
.table-c { border-collapse: collapse; width: 400px; font-size: 12px; margin: 20px; text-align: left; } .table-c th { color: #333; font-weight: bold; padding: 10px; border-bottom: 3px solid #0CC; } .table-c td { padding: 10px; color: #666; border-bottom: 1px solid #CCC; }
TABLE-D
HTMLソース
<table class="table-d"> <tr> <th scope="col">内容</th> <th scope="col">内容</th> <th scope="col">内容</th> <th scope="col">内容</th> </tr> <tbody> <tr class="color"> <td>TEXT</td> <td>TEXT</td> <td>TEXT</td> <td>TEXT</td> </tr> <tr> <td>TEXT</td> <td>TEXT</td> <td>TEXT</td> <td>TEXT</td> </tr> <tr class="color"> <td>TEXT</td> <td>TEXT</td> <td>TEXT</td> <td>TEXT</td> </tr> <tr> <td>TEXT</td> <td>TEXT</td> <td>TEXT</td> <td>TEXT</td> </tr> </tbody> </table>
CSS
.table-d { font-size: 12px; margin: 20px; width: 400px; text-align: left; border-collapse: collapse; border: 1px solid #CCC; } .table-d th { padding: 10px; color: #333; border-bottom: 1px solid #CCC; } .table-d td { padding: 10px; color: #666; } .table-d .color { background-color: #D5FAFB; }
↑WEBデザインブログランキングです
良かったら応援お願いします♪

↑ブログランキングに参加しています♪よかったらクリックしてくださいね