文字の画像(イメージ)化
cman.jp cman.jp > パーツ作成メニュー > 表のデザイン > 罫線・色をデザインする

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

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

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

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

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

table全体の指定
セル間
見出し(ヘッダー)の設定
横余白
縦余白
明細の設定
横余白
縦余白
見出し(ヘッダー)の背景色
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
他▶
透明度
明細の色指定
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
他▶
透明度
見出し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; /* 罫線       */
}
 /* --- 明細のn行スタイル指定 ------------------- */
.sample1 tr:nth-child(3n+1) {
  background    : rgba(89, 179, 0, 0.4); /* 背景色 */
}
 /* --- 明細のn列スタイル指定 ------------------- */
.sample1 tr td:nth-of-type(3n) {
  background    : rgba(89, 179, 0, 0.4); /* 背景色 */
}
</style>
ページTOP

注意事項

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

ページTOP
広告

生成できるホームページ・パーツ一覧
ご利用時の注意事項・制約事項
よくあるご質問
何で無料なの?
生成コードに利用制限はある?
生成コードに保証はある?
jQueryで生成できない?

広告
ページTOP
広告
QrCode
このページのURL
スマートフォン・タブレット
運営:株式会社シーマン