表(table)の罫線・色をデザインする

htmlで表を作成する場合はテーブルタグ「table」を使用しますが、見た目を綺麗にするにはCSSの知識が必要です。当ページでは、簡単操作で表(table)のデザインできます。

「見出しだけ色を替えたい」「2行ごとに色を変える」2列ごとに色を変える」など、色々な指定が出来ますのでお試しください。

表(table)の見た目を変更して見よう！

色々試してみて、生成されたCSSをコピー・加工してご利用ください。

table全体の指定

100% 左寄せ中央右寄せ

罫線を引く

セル間

見出し（ヘッダー）の設定

左寄せ中央右寄せ太字

横余白
縦余白

明細の設定

左寄せ中央右寄せ太字

横余白
縦余白

見出し（ヘッダー）の背景色

なし付ける

他▶

透明度

明細の色指定

なし全て 2行ごと 3行ごと 2列ごと 3列ごと

他▶

透明度

見出し1	見出し2	見出し3	見出し4	見出し5	見出し6
データ11	データ12	データ13	データ14	データ15	データ16
データ21	データ22	データ23	データ24	データ25	データ26
データ31	データ32	データ33	データ34	データ35	データ36
データ41	データ42	データ43	データ44	データ45	データ46
データ51	データ52	データ53	データ54	データ55	データ56
データ61	データ62	データ63	データ64	データ65	データ66
データ71	データ72	データ73	データ74	データ75	データ76
データ81	データ82	データ83	データ84	データ85	データ86

使用したhtml

<table class="tableArea" id="makeImg">
  <tr>
    <th>見出し1</th><th>見出し2</th><th>見出し3</th><th>見出し4</th><th>見出し5</th><th>見出し6</th>
  </tr>
  <tr>
    <td>データ11</td><td>データ12</td><td>データ13</td><td>データ14</td><td>データ15</td><td>データ16</td>
  </tr>
  <tr>
    <td>データ21</td><td>データ22</td><td>データ23</td><td>データ24</td><td>データ25</td><td>データ26</td>
  </tr>
  <tr>
    <td>データ31</td><td>データ32</td><td>データ33</td><td>データ34</td><td>データ35</td><td>データ36</td>
  </tr>
  <tr>
    <td>データ41</td><td>データ42</td><td>データ43</td><td>データ44</td><td>データ45</td><td>データ46</td>
  </tr>
  <tr>
    <td>データ51</td><td>データ52</td><td>データ53</td><td>データ54</td><td>データ55</td><td>データ56</td>
  </tr>
  <tr>
    <td>データ61</td><td>データ62</td><td>データ63</td><td>データ64</td><td>データ65</td><td>データ66</td>
  </tr>
  <tr>
    <td>データ71</td><td>データ72</td><td>データ73</td><td>データ74</td><td>データ75</td><td>データ76</td>
  </tr>
  <tr>
    <td>データ81</td><td>データ82</td><td>データ83</td><td>データ84</td><td>データ85</td><td>データ86</td>
  </tr>
</table>

生成したCSS

<style type="text/css">
#button {
  display       : inline-block;
  border-radius : 5%;          /* 角丸       */
  font-size     : 14pt;        /* 文字サイズ */
  text-align    : center;      /* 文字位置   */
  cursor        : pointer;     /* カーソル   */
  padding       : 10px 10px;   /* 余白       */
  background    : #000066;     /* 背景色     */
  color         : #ffffff;     /* 文字色     */
  line-height   : 1em;         /* 1行の高さ  */
  transition    : .3s;         /* なめらか変化 */
  box-shadow    : 4px 4px 3px #666666;  /* 影の設定 */
  border        : 2px solid #000066;    /* 枠の指定 */
}
#button:hover {
  box-shadow    : none;        /* カーソル時の影消去 */
  color         : #000066;     /* 背景色     */
  background    : #ffffff;     /* 文字色     */
}
</style>

ページTOP

色々なテーブル（表）

行と列に一定間隔で色を付ける

行と列の両方に一定間隔ごとに色を付けることもできます。
色を半透明で指定すると、重なった部分のセル色が濃く表示されます。

見出し1	見出し2	見出し3	見出し4	見出し5	見出し6
データ11	データ12	データ13	データ14	データ15	データ16
データ21	データ22	データ23	データ24	データ25	データ26
データ31	データ32	データ33	データ34	データ35	データ36
データ41	データ42	データ43	データ44	データ45	データ46
データ51	データ52	データ53	データ54	データ55	データ56
データ61	データ62	データ63	データ64	データ65	データ66
データ71	データ72	データ73	データ74	データ75	データ76
データ81	データ82	データ83	データ84	データ85	データ86

<style type="text/css">
 /* --- テーブル全体のスタイル指定 --------------- */
.sample1 {
  margin-left    : auto;             /* 中央寄せ   */
  margin-right   : auto;             /* 中央寄せ   */
  border-collapse: collapse;         /* 境界線結合 */
  font-size      : 9pt;              /* 文字サイズ */
  background     : #ffffff;          /* 背景色     */
}
 /* --- ヘッダーのスタイル指定 ------------------- */
.sample1 th {
  text-align    : center;            /* 文字位置   */
  font-weight   : bold;              /* 太文字     */
  padding       : 3px 10px;          /* 余白       */
  border        : 1px #666666 solid; /* 罫線       */
  background    : #cccccc;           /* 背景色     */
}
 /* --- 明細のスタイル指定 ----------------------- */
.sample1 td {
  text-align    : center;            /* 文字位置   */
  padding       : 3px 10px;          /* 余白       */
  border        : 1px #666666 solid; /* 罫線       */
}
 /* --- 明細のｎ行スタイル指定 ------------------- */
.sample1 tr:nth-child(3n+1) {
  background    : rgba(89, 179, 0, 0.4); /* 背景色 */
}
 /* --- 明細のｎ列スタイル指定 ------------------- */
.sample1 tr td:nth-of-type(3n) {
  background    : rgba(89, 179, 0, 0.4); /* 背景色 */
}
</style>

ページTOP

注意事項

フォントは使用するページ(html)により変わります。

ページTOP

生成できるホームページ・パーツ一覧
	文字のデザイン
	画像のデザイン
	ボタンのデザイン
	入力項目のデザイン
	テーブルのデザイン
	BOXのデザイン
	吹き出しのデザイン
	ページのデザイン
	図形のデザイン
ご利用時の注意事項・制約事項
よくあるご質問
	何で無料なの？
	生成コードに利用制限はある？
	生成コードに保証はある？
	jQueryで生成できない？

表(table)の罫線・色をデザインする

表(table)の見た目を変更して見よう！

色々なテーブル（表）

行と列に一定間隔で色を付ける

注意事項

当サイト内の関連するページ