HTMLとCSSのコピペでできる横に長い表のデザインスニペット

21分

テーブルのアイキャッチ

SHARE

HTMLのtableタグを使うことで、簡単に表を作成することができ、検索内容によっては強調スニペットにtableで記述された表が表示されるなど、未だに使えるHTMLタグの一種です。

今回は、HTMLとCSSのコピペでできる横に長い表のデザインスニペットについてご紹介します。

線が少なめのシンプルな表

縦の線を消して border-collapse: collapse; のclassを付与して線を重ねたシンプルな表です。

人間の目はよくできていて、縦や横に線をひかなくても情報の近接やグルーピングができるようにできています。

この縦の線を消すだけで、スッキリとしていながらスマートな印象になります。

職種 優先
順位		 項目 選定理由
システム開発グループ 1

Ｅ－４

 安定運用 業務のインシデント発生を抑える、といった方向で目標を立ててほしい。
2

Ｃ－２

 第一印象度 エンジニアも挨拶、服装、清潔感などといった一般常識に意識をしてほしい。
エンジニアリングサービスグループ 1

Ｅ－４

 安定運用 〇〇の社員だからこそ、会社として売上を達成するために、お客様の満足度を向上させるために、業務に取り組んでもらいたい。
2

Ｃ－２

 第一印象度 エンジニアも挨拶、服装、清潔感などといった一般常識に意識をしてほしい。
技術 1

Ａ－４

 安定運用 〇〇の社員だからこそ、会社として売上を達成するために、お客様の満足度を向上させるために、業務に取り組んでもらいたい。
2

Ｃ－２

 第一印象度 エンジニアも挨拶、服装、清潔感などといった一般常識に意識をしてほしい。

コードを表示する

HTML 

<div class="scroll">
<table class="scrolltable">
  <tr>
    <th class="syokusyu">職種</th>
    <th class="yuusen">優先<br>順位</th>
    <th colspan="2" class="koumoku">項目</th>
    <th class="riyuu">選定理由</th>
  </tr>
<!-- 1人目 -->
  <tr>
    <td class="icon human01" rowspan="2">システム開発グループ</td>
    <td class="yuusen">1</td>
    <td class="red"><p>Ｅ－４</p></td>
    <td class="compi">安定運用</td>
    <td>業務のインシデント発生を抑える、といった方向で目標を立ててほしい。</td>
  </tr>
  <tr>
    <td class="yuusen">2</td>
    <td class="red"><p>Ｃ－２</p></td>
    <td class="compi">第一印象度</td>
    <td>エンジニアも挨拶、服装、清潔感などといった一般常識に意識をしてほしい。</td>
  </tr>
<!-- 1人目 -->
<!-- 2人目 -->
  <tr>
    <td class="icon human02" rowspan="2">エンジニアリングサービスグループ</td>
    <td class="yuusen">1</td>
    <td class="red"><p>Ｅ－４</p></td>
    <td class="compi">安定運用</td>
    <td>〇〇の社員だからこそ、会社として売上を達成するために、お客様の満足度を向上させるために、業務に取り組んでもらいたい。
</td>
  </tr>
  <tr>
    <td class="yuusen">2</td>
    <td class="red"><p>Ｃ－２</p></td>
    <td class="compi">第一印象度</td>
    <td>エンジニアも挨拶、服装、清潔感などといった一般常識に意識をしてほしい。</td>
  </tr>
<!-- 2人目 -->
<!-- 3人目 -->
  <tr>
    <td class="icon human03" rowspan="2">技術</td>
    <td class="yuusen">1</td>
    <td class="red"><p>Ａ－４</p></td>
    <td class="compi">安定運用</td>
    <td>〇〇の社員だからこそ、会社として売上を達成するために、お客様の満足度を向上させるために、業務に取り組んでもらいたい。
</td>
  </tr>
  <tr>
    <td class="yuusen">2</td>
    <td class="red"><p>Ｃ－２</p></td>
    <td class="compi">第一印象度</td>
    <td>エンジニアも挨拶、服装、清潔感などといった一般常識に意識をしてほしい。</td>
  </tr>
<!-- 3人目 -->
</table>
</div>

CSS 

/* テーブル1 */
.scroll {
overflow-x: scroll;
  white-space: nowrap;
  -webkit-overflow-scrolling: touch;
}

.scrolltable {
  border-collapse: collapse;
  border-spacing: 0;
  width: 100%;
  min-width: 1000px;
}

.scrolltable tr{
  border-bottom: solid 1px #eee;
  cursor: pointer;
}

.scrolltable tr:hover{
  background-color: #eee;
}

.scrolltable th{
  text-align: center;
  padding: 5px 0;
}

.scrolltable td.icon{
  text-align: center;
  padding-left:10px;
  padding-right:10px;
}

td.icon.human01:before {
    content: '';
    display: block;
    width: 80px;
    height: 80px;
    background-image: url(https://dubdesign.net/wp-content/uploads/2021/01/001_human.svg);
    background-size: contain;
    background-repeat: no-repeat;
    border-radius: 50px;
    background-color: #eee;
    margin-right: 10px;
    margin: 0px auto 10px;
}

td.icon.human02:before {
    content: '';
    display: block;
    width: 80px;
    height: 80px;
    background-image: url(https://dubdesign.net/wp-content/uploads/2021/01/002_human.svg);
    background-size: contain;
    background-repeat: no-repeat;
    border-radius: 50px;
    background-color: #eee;
    margin-right: 10px;
    margin: 0px auto 10px;
}

td.icon.human03:before {
    content: '';
    display: block;
    width: 80px;
    height: 80px;
    background-image: url(https://dubdesign.net/wp-content/uploads/2021/01/003_human.svg);
    background-size: contain;
    background-repeat: no-repeat;
    border-radius: 50px;
    background-color: #eee;
    margin-right: 10px;
    margin: 0px auto 10px;
}

.yuusen {
  text-align:center;
}

.riyuu {
  width: 50%;
}

.icon {
  padding-top: 40px;
  padding-bottom: 40px;
}

.compi {
  font-weight: 600;
  font-size: 1.2em;
  color: #D80C18;
}

.koumoku{
  
}

.syokusyu {
  width: 20%;
}

.red p {
    background: #D80C18;
    display: inline-block;
    padding: 5px 20px;
    color: #FFF;
    font-weight: 600;
    border-radius: 30px;
    margin: 15px 10px;
}

td.red {
    text-align: center;
}

.scroll::-webkit-scrollbar {
      width: 15px;
}
.scroll::-webkit-scrollbar-thumb {
  background: #666;
  border-radius: 30px;
}
::-webkit-scrollbar-track {
      background-color: #eee;
      border-radius: 30px;
}

線を無くしてブロックで区切る表

tableに対して border-spacing を適用して、セル同士に距離を持たせてタイルっぽいデザインの表です。

職種 優先
順位		 項目 選定理由
システム開発グループ 1

Ｅ－４

 安定運用 業務のインシデント発生を抑える、といった方向で目標を立ててほしい。
2

Ｃ－２

 第一印象度 エンジニアも挨拶、服装、清潔感などといった一般常識に意識をしてほしい。
エンジニアリングサービスグループ 1

Ｅ－４

 安定運用 業務のインシデント発生を抑える、といった方向で目標を立ててほしい。
2

Ｃ－２

 第一印象度 エンジニアも挨拶、服装、清潔感などといった一般常識に意識をしてほしい。
技術 1

Ｅ－４

 安定運用 業務のインシデント発生を抑える、といった方向で目標を立ててほしい。
2

Ｃ－２

 第一印象度 エンジニアも挨拶、服装、清潔感などといった一般常識に意識をしてほしい。

コードを表示する

HTML 

<div class="scroll">
<table class="tb02">
  <tr>
    <th class="th02_1">職種</th>
    <th class="th02_2">優先<br>順位</th>
    <th colspan="2" class="th02_3">項目</th>
    <th class="th02_4">選定理由</th>
  </tr>
<!-- 1人目 -->
  <tr>
    <td class="td02_1 human01" rowspan="2">システム開発グループ</td>
    <td class="td02_2">1</td>
    <td class="td02_3"><p>Ｅ－４</p></td>
    <td class="td02_4">安定運用</td>
    <td class="td02_5">業務のインシデント発生を抑える、といった方向で目標を立ててほしい。</td>
  </tr>
  <tr>
    <td class="td02_2">2</td>
    <td class="td02_3"><p>Ｃ－２</p></td>
    <td class="td02_4">第一印象度</td>
    <td class="td02_5">エンジニアも挨拶、服装、清潔感などといった一般常識に意識をしてほしい。</td>
  </tr>
<!-- 1人目 -->
<!-- 2人目 -->
  <tr>
    <td class="td02_1 human02" rowspan="2">エンジニアリングサービスグループ</td>
    <td class="td02_2">1</td>
    <td class="td02_3"><p>Ｅ－４</p></td>
    <td class="td02_4">安定運用</td>
    <td class="td02_5">業務のインシデント発生を抑える、といった方向で目標を立ててほしい。</td>
  </tr>
  <tr>
    <td class="td02_2">2</td>
    <td class="td02_3"><p>Ｃ－２</p></td>
    <td class="td02_4">第一印象度</td>
    <td class="td02_5">エンジニアも挨拶、服装、清潔感などといった一般常識に意識をしてほしい。</td>
  </tr>
<!-- 2人目 -->
<!-- 3人目 -->
  <tr>
    <td class="td02_1 human03" rowspan="2">技術</td>
    <td class="td02_2">1</td>
    <td class="td02_3"><p>Ｅ－４</p></td>
    <td class="td02_4">安定運用</td>
    <td class="td02_5">業務のインシデント発生を抑える、といった方向で目標を立ててほしい。</td>
  </tr>
  <tr>
    <td class="td02_2">2</td>
    <td class="td02_3"><p>Ｃ－２</p></td>
    <td class="td02_4">第一印象度</td>
    <td class="td02_5">エンジニアも挨拶、服装、清潔感などといった一般常識に意識をしてほしい。</td>
  </tr>
<!-- 3人目 -->
</table>
</div>

CSS 

/* テーブル02 */
.scroll {
overflow-x: scroll;
  white-space: nowrap;
  -webkit-overflow-scrolling: touch;
}

.tb02 {
  border-collapse: separate;
  border-spacing: 0;
  width: 100%;
  min-width: 1000px;
  border-spacing: 5px;
}

.tb02 th {
  background: #D80C18;
  color: #FFF;
  padding: 5px 10px;
  letter-spacing: 5px;
}

.tb02 td {
  text-align: center;
  background: #eee;
}

.th02_1 {
  width: 20%;
}

.th02_2 {
  width: 8%;
}

.th02_3 {
  width: 20%;
}

.th02_4 {
  width: 52%;
}

.tb02 .td02_5 {
  text-align:left;
  padding-left: 10px;
}

.tb02 tr:last-child {
  border-bottom: solid 6px #D80C18;
}

.td02_1 {
  padding: 20px 5px;
}

.td02_3 p {
    border-bottom: solid 2px #D80C18;
    display: inline-block;
    font-size: 1.1em;
    font-weight: 600;
    padding: 0 2px;
    margin: 15px 10px;
}

td.td02_4 {
    font-weight: 600;
}

td.human01:before {
    content: '';
    display: block;
    width: 80px;
    height: 80px;
    background-image: url(https://dubdesign.net/wp-content/uploads/2021/01/001_human.svg);
    background-size: contain;
    background-repeat: no-repeat;
    border-radius: 50px;
    background-color: #FFF;
    margin-right: 10px;
    margin: 0px auto 10px;
}

td.human02:before {
    content: '';
    display: block;
    width: 80px;
    height: 80px;
    background-image: url(https://dubdesign.net/wp-content/uploads/2021/01/002_human.svg);
    background-size: contain;
    background-repeat: no-repeat;
    border-radius: 50px;
    background-color: #FFF;
    margin-right: 10px;
    margin: 0px auto 10px;
}

td.human03:before {
    content: '';
    display: block;
    width: 80px;
    height: 80px;
    background-image: url(https://dubdesign.net/wp-content/uploads/2021/01/003_human.svg);
    background-size: contain;
    background-repeat: no-repeat;
    border-radius: 50px;
    background-color: #FFF;
    margin-right: 10px;
    margin: 0px auto 10px;
}

左のイラスト位置を変えた表

線が少なめのシンプルな表のデザインに似ていますが、一番左のセルの画像を横並びにした表です。

背景を色つけしたいtrタグに .bgeee のclassを付け、背景色を付けています。

職種 優先
順位		 項目 選定理由

システム開発グループの人

 1

Ｅ－４

 安定運用 業務のインシデント発生を抑える、といった方向で目標を立ててほしい。
2

Ｃ－２

 第一印象度 エンジニアも挨拶、服装、清潔感などといった一般常識に意識をしてほしい。

技術

 1

Ｅ－４

 安定運用 業務のインシデント発生を抑える、といった方向で目標を立ててほしい。
2

Ｃ－２

 第一印象度 エンジニアも挨拶、服装、清潔感などといった一般常識に意識をしてほしい。

システム開発グループの人

 1

Ｅ－４

 安定運用 業務のインシデント発生を抑える、といった方向で目標を立ててほしい。
2

Ｃ－２

 第一印象度 エンジニアも挨拶、服装、清潔感などといった一般常識に意識をしてほしい。

システム開発グループの人

 1

Ｅ－４

 安定運用 業務のインシデント発生を抑える、といった方向で目標を立ててほしい。
2

Ｃ－２

 第一印象度 エンジニアも挨拶、服装、清潔感などといった一般常識に意識をしてほしい。

コードを表示する

HTML 

<div class="scroll">
<table class="tb03">
  <tr>
    <th class="th03_1">職種</th>
    <th class="th03_2">優先<br>順位</th>
    <th colspan="2" class="th03_3">項目</th>
    <th class="th03_4">選定理由</th>
  </tr>
<!-- 1人目 -->
  <tr>
    <td class="td03_1" rowspan="2"><img src="https://dubdesign.net/wp-content/uploads/2021/01/001_human.svg"><p>システム開発グループの人</p></td>
    <td class="td03_2">1</td>
    <td class="td03_3"><p>Ｅ－４</p></td>
    <td class="td03_4">安定運用</td>
    <td class="td03_5">業務のインシデント発生を抑える、といった方向で目標を立ててほしい。</td>
  </tr>
  <tr>
    <td class="td03_2">2</td>
    <td class="td03_3"><p>Ｃ－２</p></td>
    <td class="td03_4">第一印象度</td>
    <td class="td03_5">エンジニアも挨拶、服装、清潔感などといった一般常識に意識をしてほしい。</td>
  </tr>
<!-- 1人目 -->
<!-- 2人目 -->
  <tr class="bgeee">
    <td class="td03_1" rowspan="2"><img src="https://dubdesign.net/wp-content/uploads/2021/01/002_human.svg"><p>技術</p></td>
    <td class="td03_2">1</td>
    <td class="td03_3"><p>Ｅ－４</p></td>
    <td class="td03_4">安定運用</td>
    <td class="td03_5">業務のインシデント発生を抑える、といった方向で目標を立ててほしい。</td>
  </tr>
  <tr class="bgeee">
    <td class="td03_2">2</td>
    <td class="td03_3"><p>Ｃ－２</p></td>
    <td class="td03_4">第一印象度</td>
    <td class="td03_5">エンジニアも挨拶、服装、清潔感などといった一般常識に意識をしてほしい。</td>
  </tr>
<!-- 2人目 -->
<!-- 3人目 -->
  <tr>
    <td class="td03_1" rowspan="2"><img src="https://dubdesign.net/wp-content/uploads/2021/01/003_human.svg"><p>システム開発グループの人</p></td>
    <td class="td03_2">1</td>
    <td class="td03_3"><p>Ｅ－４</p></td>
    <td class="td03_4">安定運用</td>
    <td class="td03_5">業務のインシデント発生を抑える、といった方向で目標を立ててほしい。</td>
  </tr>
  <tr>
    <td class="td03_2">2</td>
    <td class="td03_3"><p>Ｃ－２</p></td>
    <td class="td03_4">第一印象度</td>
    <td class="td03_5">エンジニアも挨拶、服装、清潔感などといった一般常識に意識をしてほしい。</td>
  </tr>
<!-- 3人目 -->
<!-- 4人目 -->
  <tr class="bgeee">
    <td class="td03_1" rowspan="2"><img src="https://dubdesign.net/wp-content/uploads/2021/01/001_human.svg"><p>システム開発グループの人</p></td>
    <td class="td03_2">1</td>
    <td class="td03_3"><p>Ｅ－４</p></td>
    <td class="td03_4">安定運用</td>
    <td class="td03_5">業務のインシデント発生を抑える、といった方向で目標を立ててほしい。</td>
  </tr>
  <tr class="bgeee">
    <td class="td03_2">2</td>
    <td class="td03_3"><p>Ｃ－２</p></td>
    <td class="td03_4">第一印象度</td>
    <td class="td03_5">エンジニアも挨拶、服装、清潔感などといった一般常識に意識をしてほしい。</td>
  </tr>
<!-- 4人目 -->
</table>
</div>

CSS 

/* テーブル03 */
.scroll {
overflow-x: scroll;
  white-space: normal;
  -webkit-overflow-scrolling: touch;
}

.tb03 {
  border-collapse: collapse;
  width: 100%;
  min-width: 1000px;
}

.tb03 th {
    background: #707070;
    color: #FFF;
    padding: 5px 0;
    letter-spacing: 5px;
    border-bottom: double 4px #707070;
}

.tb03 tr{
  border-bottom: solid 1px #999;
  cursor: pointer;
}

.th03_1 {
  width: 22%;
}

.th03_2 {
  width: 6%;
}

.th03_3 {
  width: 20%;
}

.th03_4 {
  width: 52%;
}

.tb03 td {
    text-align: center;
    position: relative;
}

.tb03 td img {
    width: 60px;
    height: 60px;
    border-radius: 50px;
    background: #eee;
    position: absolute;
    display: inline-block;
    float: left;
    left: 10px;
    top: 0;
    bottom: 0;
    margin: auto;
}

.td03_1 p {
    text-align: left;
    vertical-align: middle;
    display: inline-block;
    width: 62%;
    float: right;
    margin-right: 10px;
    margin-bottom: 0;
}

.td03_3 p {
    padding: 5px 10px;
    background: #D80C18;
    color: #FFF;
    font-weight: 600;
    margin: 10px 0;
}

.bgeee {
  background: #eee;
}

td.td03_5 {
    text-align: left;
}

セルが多めの表

セルが多めの場合の表です。

セル内の文字量によっては、セルに罫線を引いた方が見やすくなります。

職種 No. 項目 1点 2点 3点 4点 5点 6点
歯科医師 1 個人保険目標達成率 80%未満 80%以上90%未満 90%以上100%未満 100%以上105%未満 105%以上120%未満 120%以上
2 部門総売上達成率 80%未満 80%未満 80%未満 80%未満 80%未満 80%未満
3 担当部門総件数達成率 80%未満〜90%以上 80%未満 80%未満 80%未満 80%未満 80%未満
4 個人ヒヤリハット報告件数 80%未満 80%未満 80%未満 80%未満 80%未満 80%未満

コードを表示する

HTML 

<div class="scroll">
<table class="stickytable">
  <thead>
    <tr>
      <th class="th_01">職種</th>
      <th class="th_02">No.</th>
      <th class="th_03">項目</th>
      <th class="th_1ten">1点</th>
      <th class="th_2ten">2点</th>
      <th class="th_3ten">3点</th>
      <th class="th_4ten">4点</th>
      <th class="th_5ten">5点</th>
      <th class="th_6ten">6点</th>
    </tr>
  </thead>
<tbody>
<!-- 1段目 -->
<tr>
<th class="chara kpihuman01" rowspan="4">歯科医師</th>
<td class="td_001">1</td>
<td class="td_002"><span>個人保険目標達成率</span></td>
<td class="td_1ten">80%未満</td>
<td class="td_2ten">80%以上90%未満</td>
<td class="td_3ten">90%以上100%未満</td>
<td class="td_4ten">100%以上105%未満</td>
<td class="td_5ten">105%以上120%未満</td>
<td class="td_6ten">120%以上</td>
</tr>
<!-- 1段目 -->
<!-- 2段目 -->
<tr>
<td class="td_001">2</td>
<td class="td_002"><span>部門総売上達成率</span></td>
<td class="td_1ten">80%未満</td>
<td class="td_2ten">80%未満</td>
<td class="td_3ten">80%未満</td>
<td class="td_4ten">80%未満</td>
<td class="td_5ten">80%未満</td>
<td class="td_6ten">80%未満</td>
</tr>
<!-- 2段目 -->
<!-- 3段目 -->
<tr>
<td class="td_001">3</td>
<td class="td_002"><span>担当部門総件数達成率</span></td>
<td class="td_1ten">80%未満〜90%以上</td>
<td class="td_2ten">80%未満</td>
<td class="td_3ten">80%未満</td>
<td class="td_4ten">80%未満</td>
<td class="td_5ten">80%未満</td>
<td class="td_6ten">80%未満</td>
</tr>
<!-- 3段目 -->
<!-- 4段目 -->
<tr>
<td class="td_001">4</td>
<td class="td_002"><span>個人ヒヤリハット報告件数</span></td>
<td class="td_1ten">80%未満</td>
<td class="td_2ten">80%未満</td>
<td class="td_3ten">80%未満</td>
<td class="td_4ten">80%未満</td>
<td class="td_5ten">80%未満</td>
<td class="td_6ten">80%未満</td>
</tr>
<!-- 4段目 -->
</tbody>
</table>
</div>

CSS 

/* 表全体のCSS */
.stickytable {border-collapse: collapse;
border-spacing: 0;width: 100%;min-width: 1000px; text-align:center;}
.stickytable th{text-align: center; padding: 10px 0; background:#FFF;}
th.th_01 {width: 10%;}
th.th_02 {width: 5%;}
th.th_03 {width: 19%;}
th.th_1ten {width: 11%;}
th.th_2ten {width: 11%;}
th.th_3ten {width: 11%;}
th.th_4ten {width: 11%;}
th.th_5ten {width: 11%;}
th.th_6ten {width: 11%;}
.stickytable tr{ border-bottom: solid 1px #eee; cursor: pointer; }
.stickytable tr:nth-child(even) {
  background: #fcfcfc;
}
.stickytable tr:hover{
  background-color: #eee;
}

.stickytable thead th {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 1;
}

/* TD個別のCSS */ 
.stickytable td {
  padding: 15px 10px;
}
.stickytable .td_002 {
  text-align:left;
  font-weight: 600;
  font-size: 1.2em;
  color: #D80C18;
}
.td_1ten, .td_2ten, .td_3ten, .td_4ten, .td_5ten, .td_6ten {font-size:0.9em;}

.td_002 span {
    display: block;
    padding: 20px 0px;
}

/* アイコン */
td.chara {
  padding-top: 40px;
  padding-bottom: 40px;
  background:#FFF;
}
th.chara:before {
    content: '';
    display: block;
    width: 80px;
    height: 80px;
    background-size: contain;
    background-repeat: no-repeat;
    border-radius: 50px;
    background-color: #eee;
    margin-right: 10px;
    margin: 0px auto 10px;
}

.kpihuman01:before {background-image: url(https://dubdesign.net/wp-content/uploads/2021/01/003_human.svg);}

前の記事

パソコンのイラスト
HTMLとCSSのコピペでできるパソコンやブラウザデザインのス…

次の記事

jQueryライブラリmodal-videoのコピペでできるY…
モーダルウィンドウのイラスト

関連記事

カテゴリーのイラスト

同じカテゴリの記事一覧

ボタンの影

まとめ記事

Article

About

Summary

OTHER

DUB DESiGNはデザインをテーマにしたメディアです。Webデザインに関するHow-toや、WordPressのスニペットなど、デザインの話を中心に、仕事を楽しむすべての方を対象に記事を配信しています。

＞＞ 詳しくはこちら