この記事ではHTMLの表（テーブル）のテンプレート、作成例を紹介して解説します。
紹介するテンプレートのコードはAIを使わずに私自身が手書きしています。
AIとは別に人が書いた手書きのコードが欲しいという人はぜひご利用ください。

• HTMLの表（テーブル）のテンプレート、作成例【2025年 手書き】
• • シンプルな表
  • • CSSの解説
  • ヘッダに色が付いた表
  • • CSSの解説
  • オセロ調の表
  • • CSSの解説

シンプルな表

まずはシンプルな表からです。以下のような表になります。

CSSは以下になります。

.simple-table {  
    border: 2px solid #474a4d;  
    border-collapse: collapse;  
    background: white;  
}  
.simple-table thead td {  
    font-weight: bold;  
}  
.simple-table tr {  
    border-bottom: 1px solid #474a4d;  
}  
.simple-table td {  
    padding: calc(1rem*0.7) calc(1.618rem*0.7);  
    color: #474a4d;  
}  

HTMLは以下です。

<table class="simple-table">  
    <thead>  
        <tr>  
            <td>ID</td>  
            <td>名前</td>  
            <td>年齢</td>  
            <td>身長</td>  
        </tr>  
    </thead>  
    <tbody>  
        <tr>  
            <td>1</td>  
            <td>HTML太郎</td>  
            <td>30</td>  
            <td>170</td>  
        </tr>  
        <tr>  
            <td>2</td>  
            <td>HTML花子</td>  
            <td>24</td>  
            <td>160</td>  
        </tr>  
        <tr>  
            <td>3</td>  
            <td>HTML次郎</td>  
            <td>40</td>  
            <td>190</td>  
        </tr>  
    </tbody>  
</table>  

この表は極力デザインを簡素化しているのが特徴です。
CSSを見ていただくとわかりますが、ほとんどデザインをしていません。

CSSの解説

シンプルな表のデザインの解説です。

.simple-table {  
    border: 2px solid #474a4d;  
    border-collapse: collapse;  
    background: white;  
}  
.simple-table thead td {  
    font-weight: bold;  
}  
.simple-table tr {  
    border-bottom: 1px solid #474a4d;  
}  
.simple-table td {  
    padding: calc(1rem*0.7) calc(1.618rem*0.7);  
    color: #474a4d;  
}  

.simple-tableというのがクラス名です。このクラス名が付いているtableタグをCSSで装飾しています。
tableタグにこのクラス名を付ければ、CSSが反映されます。

.simple-table {  
    border: 2px solid #474a4d;  
    border-collapse: collapse;  
    background: white;  
}  

上記では表を装飾しています。
borderは表の外枠のデザインです。線の太さ、線の種類、線の色を順に指定します。
2pxにしているので、内枠よりも1px太い線になっています。ここの数値を変えると外枠の線が太くなったり細くなったりします。
border-collapseは、表のセルの境界の設定です。collapseにするとセルが境界線を共有するようになります。この指定がないとセルにborderが効きません。
backgroundは表の背景色です。whiteで白色を指定しています。

.simple-table thead td {  
    font-weight: bold;  
}  

上記ではtheadの中にあるtd要素を修飾しています。
font-weightはフォントの太さを指定します。boldを指定するとフォントが太くなります。

.simple-table tr {  
    border-bottom: 1px solid #474a4d;  
}  

上記では表の行（tr）を修飾しています。
border-bottomは要素の下側の線を指定できます。線の太さ、線の種類、線の色を設定できます。

.simple-table td {  
    padding: calc(1rem*0.7) calc(1.618rem*0.7);  
    color: #474a4d;  
}  

上記では表のtdタグを修飾しています。tdは表のセル要素です。
paddingは要素の内側の余白の指定です。
たとえば

padding: 1rem 2rem;  

と書くと、上下の余白がフォント1文字文、左右の余白がフォント2文字文できます。
calcは値を計算するためのもので、これで数値を囲うと四則演算ができます。
calc(1rem*0.7)というのは、1remに0.7を掛けています。これはつまり、1remを0.7倍しているということです。1remの0.7倍は0.7remになります。

padding: calc(1rem*0.7) calc(1.618rem*0.7);  

という指定は、上下余白を1remの0.7倍、左右余白を1.618remの0.7倍にしています。
1remと1.618remは黄金比になります。これで余白を指定すると見た目が美しくなります。
0.7の値を大きくしたり小さくしたりすると、余白の大きさを、黄金比を維持して変更できます。

ヘッダに色が付いた表

ヘッダ部分に色が付いている表です。以下のような表になります。

この表はヘッダの行部分が色付きになっています。上記では赤色です。
表の外枠の四隅は丸角になっています。
ボディ部分は上下左右に枠線があり、セルが区切られています。
枠線の色は若干の赤色になっています。

CSSは以下になります。

.red-table {  
    border-collapse: collapse;  
    border-style: hidden;  
    border-radius: 5px;  
    box-shadow: 0 0 0 2px #640125;  
}  
.red-table thead tr {  
    background: #d7003a;  
}  
.red-table thead td {  
    font-weight: bold;  
    color: white;  
}  
.red-table tr {  
    border-bottom: 1px solid #640125;  
}  
.red-table tbody td {  
    border-right: 1px solid #640125;  
    color: #524e4d;  
}  
.red-table td {  
    padding: calc(1rem*0.7) calc(1.618rem*0.7);  
}  

HTMLは以下です。

<table class="red-table">  
    <thead>  
        <tr>  
            <td>ID</td>  
            <td>名前</td>  
            <td>年齢</td>  
            <td>身長</td>  
        </tr>  
    </thead>  
    <tbody>  
        <tr>  
            <td>1</td>  
            <td>HTML太郎</td>  
            <td>30</td>  
            <td>170</td>  
        </tr>  
        <tr>  
            <td>2</td>  
            <td>HTML花子</td>  
            <td>24</td>  
            <td>160</td>  
        </tr>  
        <tr>  
            <td>3</td>  
            <td>HTML次郎</td>  
            <td>40</td>  
            <td>190</td>  
        </tr>  
    </tbody>  
</table>  

CSSの解説

ヘッダ部分が色付きの表のCSSの解説になります。

.red-table {  
    border-collapse: collapse;  
    border-style: hidden;  
    border-radius: 5px;  
    box-shadow: 0 0 0 2px #640125;  
}  
.red-table thead tr {  
    background: #d7003a;  
}  
.red-table thead td {  
    font-weight: bold;  
    color: white;  
}  
.red-table tr {  
    border-bottom: 1px solid #640125;  
}  
.red-table tbody td {  
    border-right: 1px solid #640125;  
    color: #524e4d;  
    background: #fffefe;  
}  
.red-table td {  
    padding: calc(1rem*0.7) calc(1.618rem*0.7);  
}  

まずは表の装飾からです。

.red-table {  
    border-collapse: collapse;  
    border-style: hidden;  
    border-radius: 5px;  
    box-shadow: 0 0 0 2px #640125;  
}  

上記ではtableタグの装飾をしています。
border-styleをhiddenにしていますが、これは表のボーダーを消しています。
border-radiusはボーダーの四隅の丸まり方です。5pxにして小さく角丸にしています。
box-shadowは要素に影を落とすプロパティです。

box-shadow: 水平方向の影の位置 垂直方向の影の位置 ぼかし距離 影の大きさ 影の色;  

水平と垂直とぼかしを0にして影の大きさを2pxにしています。こうすると表の外枠にボーダーみたいな影が出来ます。
なぜこのような影の指定にしているかと言うと、表のボーダーは角を丸められないんです。角を丸めるためにbox-shadowを使っています。

.red-table thead tr {  
    background: #d7003a;  
}  

上記ではtheadのtrの背景色を指定しています。
ヘッダが赤いのはここの指定のおかげです。

.red-table thead td {  
    font-weight: bold;  
    color: white;  
}  

上記ではtheadのtdの装飾をしています。
フォントをfont-weightで太くして、色を白色にしています。

.red-table tr {  
    border-bottom: 1px solid #640125;  
}  

上記ではtr要素の修飾をしています。
要素の下端のボーダーを指定しています。

.red-table tbody td {  
    border-right: 1px solid #640125;  
    color: #524e4d;  
    background: #fffefe;  
}  

上記ではtbodyのtd要素の修飾をしています。
border-rightは要素の右端のボーダー指定です。
colorでフォント色を指定しています。
backgroundで背景色です。

.red-table td {  
    padding: calc(1rem*0.7) calc(1.618rem*0.7);  
}  

上記ではtd要素の内側の余白を指定しています。
詳細については「シンプルな表」を参照してください。

オセロ調の表

オセロ調の表です。

白黒の升目みたいにしています。
CSSは以下の通りです。

.othello-table {  
    border-collapse: collapse;  
    border-style: none;  
    border-radius: 8px;  
    box-shadow: 0 0 0 2px #2b2b2b;  
}  
.othello-table thead td:nth-child(even) {  
    background: #2b2b2b;  
    color: white;  
}  
.othello-table tbody tr:nth-child(even) td:nth-child(even) {  
    background: #2b2b2b;  
    color: white;  
}  
.othello-table tbody tr:nth-child(odd) td:nth-child(odd) {  
    background: #2b2b2b;  
    color: white;  
}  
.othello-table td {  
    padding: calc(1rem*0.7) calc(1.618rem*0.7);  
}  

HTMLは以下の通りです。

<table class="othello-table">  
    <thead>  
        <tr>  
            <td>ID</td>  
            <td>名前</td>  
            <td>年齢</td>  
            <td>身長</td>  
        </tr>  
    </thead>  
    <tbody>  
        <tr>  
            <td>1</td>  
            <td>HTML太郎</td>  
            <td>30</td>  
            <td>170</td>  
        </tr>  
        <tr>  
            <td>2</td>  
            <td>HTML花子</td>  
            <td>24</td>  
            <td>160</td>  
        </tr>  
        <tr>  
            <td>3</td>  
            <td>HTML次郎</td>  
            <td>40</td>  
            <td>190</td>  
        </tr>  
    </tbody>  
</table>  

CSSの解説

.othello-table {  
    border-collapse: collapse;  
    border-style: none;  
    border-radius: 8px;  
    box-shadow: 0 0 0 2px #2b2b2b;  
}  
.othello-table thead td:nth-child(even) {  
    background: #2b2b2b;  
    color: white;  
}  
.othello-table tbody tr:nth-child(even) td:nth-child(even) {  
    background: #2b2b2b;  
    color: white;  
}  
.othello-table tbody tr:nth-child(odd) td:nth-child(odd) {  
    background: #2b2b2b;  
    color: white;  
}  
.othello-table td {  
    padding: calc(1rem*0.7) calc(1.618rem*0.7);  
}  

このCSSで特徴的なのは、升目を作るスタイルの指定です。

.othello-table {  
    border-collapse: collapse;  
    border-style: none;  
    border-radius: 8px;  
    box-shadow: 0 0 0 2px #2b2b2b;  
}  

上記では表のtableの指定をしています。
border-collapseでセルのボーダーの境界を共有するように指定しています。
border-styleでボーダーを非表示にします。
border-radiusで表の角を丸くします。
box-shadowで表の周りに影を作り、ボーダーの代わりに枠線にしています。

.othello-table thead td:nth-child(even) {  
    background: #2b2b2b;  
    color: white;  
}  

上記ではtheadのtd要素を修飾しています。
td:nth-child(even)という指定は偶数のtd要素だけにスタイルを適用します。
backgroundで背景色を黒し、文字の色はcolorで白色にします。

.othello-table tbody tr:nth-child(even) td:nth-child(even) {  
    background: #2b2b2b;  
    color: white;  
}  

上記ではtbodyのtd要素を修飾しています。
tr:nth-child(even)で偶数のtr要素を指定しています。さらにtd:nth-child(even)で偶数のtd要素を指定しています。

.othello-table tbody tr:nth-child(odd) td:nth-child(odd) {  
    background: #2b2b2b;  
    color: white;  
}  

上記では奇数（odd）要素に指定しています。
偶数と奇数に指定することで白黒の升目になります。

.othello-table td {  
    padding: calc(1rem*0.7) calc(1.618rem*0.7);  
}  

上記ではtd要素の内側の余白を指定しています。
詳細についてはシンプルな表をご参照ください。