テーブル
表組（theadなし）
通常（default）
| 坊ちゃん | 親譲りの無鉄砲で小供の時から損ばかりしている。小学校に居る時分学校の二階から飛び降りて一週間ほど腰を抜かした事がある。 |
|---|---|
| 坊ちゃん | 親譲りの無鉄砲で小供の時から損ばかりしている。小学校に居る時分学校の二階から飛び降りて一週間ほど腰を抜かした事がある。 |
<table class="c-table" data-config="default">
<colgroup>
<col class="u-w-10em"><!-- col要素で幅指定 -->
<col><!-- col要素で幅指定 -->
</colgroup>
<tbody>
<tr>
<th>坊ちゃん</th>
<td>親譲りの無鉄砲で小供の時から損ばかりしている。小学校に居る時分学校の二階から飛び降りて一週間ほど腰を抜かした事がある。</td>
</tr>
<tr>
<th>坊ちゃん</th>
<td>親譲りの無鉄砲で小供の時から損ばかりしている。小学校に居る時分学校の二階から飛び降りて一週間ほど腰を抜かした事がある。</td>
</tr>
</tbody>
</table> セル幅均等（equal）
| 坊ちゃん | 親譲りの無鉄砲で小供の時から損ばかりしている。小学校に居る時分学校の二階から飛び降りて一週間ほど腰を抜かした事がある。 |
|---|---|
| 坊ちゃん | 親譲りの無鉄砲で小供の時から損ばかりしている。小学校に居る時分学校の二階から飛び降りて一週間ほど腰を抜かした事がある。 |
<table class="c-table" data-config="equal">
<colgroup>
<col><!-- col要素で幅指定 -->
<col><!-- col要素で幅指定 -->
</colgroup>
<tbody>
<tr>
<th>坊ちゃん</th>
<td>親譲りの無鉄砲で小供の時から損ばかりしている。小学校に居る時分学校の二階から飛び降りて一週間ほど腰を抜かした事がある。</td>
</tr>
<tr>
<th>坊ちゃん</th>
<td>親譲りの無鉄砲で小供の時から損ばかりしている。小学校に居る時分学校の二階から飛び降りて一週間ほど腰を抜かした事がある。</td>
</tr>
</tbody>
</table> 下記のように、trでthをまとめることができるが、HTML構造が変わるためdata-config属性によるレスポンシブには対応していない。
| 坊ちゃん | 坊ちゃん |
|---|---|
| 親譲りの無鉄砲で小供の時から損ばかりしている。小学校に居る時分学校の二階から飛び降りて一週間ほど腰を抜かした事がある。 | 親譲りの無鉄砲で小供の時から損ばかりしている。小学校に居る時分学校の二階から飛び降りて一週間ほど腰を抜かした事がある。 |
| 親譲りの無鉄砲で小供の時から損ばかりしている。小学校に居る時分学校の二階から飛び降りて一週間ほど腰を抜かした事がある。 | 親譲りの無鉄砲で小供の時から損ばかりしている。小学校に居る時分学校の二階から飛び降りて一週間ほど腰を抜かした事がある。 |
<table class="c-table" data-config="equal">
<colgroup>
<col><!-- col要素で幅指定 -->
<col><!-- col要素で幅指定 -->
</colgroup>
<tbody>
<tr>
<th>坊ちゃん</th>
<th>坊ちゃん</th>
</tr>
<tr>
<td>親譲りの無鉄砲で小供の時から損ばかりしている。小学校に居る時分学校の二階から飛び降りて一週間ほど腰を抜かした事がある。</td>
<td>親譲りの無鉄砲で小供の時から損ばかりしている。小学校に居る時分学校の二階から飛び降りて一週間ほど腰を抜かした事がある。</td>
</tr>
<tr>
<td>親譲りの無鉄砲で小供の時から損ばかりしている。小学校に居る時分学校の二階から飛び降りて一週間ほど腰を抜かした事がある。</td>
<td>親譲りの無鉄砲で小供の時から損ばかりしている。小学校に居る時分学校の二階から飛び降りて一週間ほど腰を抜かした事がある。</td>
</tr>
</tbody>
</table> 横並び（row）
| 坊ちゃん | 親譲りの無鉄砲で小供の時から損ばかりしている。小学校に居る時分学校の二階から飛び降りて一週間ほど腰を抜かした事がある。 |
|---|---|
| 坊ちゃん | 親譲りの無鉄砲で小供の時から損ばかりしている。小学校に居る時分学校の二階から飛び降りて一週間ほど腰を抜かした事がある。 |
<table class="c-table" data-config="row">
<colgroup>
<col><!-- col要素で幅指定 -->
<col><!-- col要素で幅指定 -->
</colgroup>
<tbody>
<tr>
<th>坊ちゃん</th>
<td>親譲りの無鉄砲で小供の時から損ばかりしている。小学校に居る時分学校の二階から飛び降りて一週間ほど腰を抜かした事がある。</td>
</tr>
<tr>
<th>坊ちゃん</th>
<td>親譲りの無鉄砲で小供の時から損ばかりしている。小学校に居る時分学校の二階から飛び降りて一週間ほど腰を抜かした事がある。</td>
</tr>
</tbody>
</table> | 坊ちゃん | 親譲りの無鉄砲で小供の時から損ばかりしている。小学校に居る時分学校の二階から飛び降りて一週間ほど腰を抜かした事がある。 | 親譲りの無鉄砲で小供の時から損ばかりしている。小学校に居る時分学校の二階から飛び降りて一週間ほど腰を抜かした事がある。 |
|---|---|---|
| 坊ちゃん | 親譲りの無鉄砲で小供の時から損ばかりしている。小学校に居る時分学校の二階から飛び降りて一週間ほど腰を抜かした事がある。 | 親譲りの無鉄砲で小供の時から損ばかりしている。小学校に居る時分学校の二階から飛び降りて一週間ほど腰を抜かした事がある。 |
<table class="c-table" data-config="row">
<colgroup>
<col><!-- col要素で幅指定 -->
<col><!-- col要素で幅指定 -->
</colgroup>
<tbody>
<tr>
<th>坊ちゃん</th>
<td>親譲りの無鉄砲で小供の時から損ばかりしている。小学校に居る時分学校の二階から飛び降りて一週間ほど腰を抜かした事がある。</td>
<td>親譲りの無鉄砲で小供の時から損ばかりしている。小学校に居る時分学校の二階から飛び降りて一週間ほど腰を抜かした事がある。</td>
</tr>
<tr>
<th>坊ちゃん</th>
<td>親譲りの無鉄砲で小供の時から損ばかりしている。小学校に居る時分学校の二階から飛び降りて一週間ほど腰を抜かした事がある。</td>
<td>親譲りの無鉄砲で小供の時から損ばかりしている。小学校に居る時分学校の二階から飛び降りて一週間ほど腰を抜かした事がある。</td>
</tr>
</tbody>
</table> 縦並び（column）
| 坊ちゃん | 親譲りの無鉄砲で小供の時から損ばかりしている。小学校に居る時分学校の二階から飛び降りて一週間ほど腰を抜かした事がある。 |
|---|---|
| 坊ちゃん | 親譲りの無鉄砲で小供の時から損ばかりしている。小学校に居る時分学校の二階から飛び降りて一週間ほど腰を抜かした事がある。 |
<table class="c-table" data-config="column">
<colgroup>
<col><!-- col要素で幅指定 -->
<col><!-- col要素で幅指定 -->
</colgroup>
<tbody>
<tr>
<th>坊ちゃん</th>
<td>親譲りの無鉄砲で小供の時から損ばかりしている。小学校に居る時分学校の二階から飛び降りて一週間ほど腰を抜かした事がある。</td>
</tr>
<tr>
<th>坊ちゃん</th>
<td>親譲りの無鉄砲で小供の時から損ばかりしている。小学校に居る時分学校の二階から飛び降りて一週間ほど腰を抜かした事がある。</td>
</tr>
</tbody>
</table> レスポンシブ
デフォルトは縦並び（column）／640px（sm）以上は横並び（row）。
data-config内で利用できるレスポンシブの接頭辞は、レスポンシブの実装方法の表の接頭辞列をご覧ください。| 坊ちゃん | 親譲りの無鉄砲で小供の時から損ばかりしている。小学校に居る時分学校の二階から飛び降りて一週間ほど腰を抜かした事がある。 |
|---|---|
| 坊ちゃん | 親譲りの無鉄砲で小供の時から損ばかりしている。小学校に居る時分学校の二階から飛び降りて一週間ほど腰を抜かした事がある。 |
<table class="c-table" data-config="[column][sm:row]">
<colgroup>
<col class="tab:u-w-10em pc:u-w-10em">
<col><!-- col要素で幅指定 -->
</colgroup>
<tbody>
<tr>
<th>坊ちゃん</th>
<td>親譲りの無鉄砲で小供の時から損ばかりしている。小学校に居る時分学校の二階から飛び降りて一週間ほど腰を抜かした事がある。</td>
</tr>
<tr>
<th>坊ちゃん</th>
<td>親譲りの無鉄砲で小供の時から損ばかりしている。小学校に居る時分学校の二階から飛び降りて一週間ほど腰を抜かした事がある。</td>
</tr>
</tbody>
</table> 表組（theadあり）
thead付きテーブル（default）
| タイプA | タイプB | タイプC | |
|---|---|---|---|
| 特徴 | シンプルで使いやすい | 多機能で拡張性が高い | カスタマイズ可能で柔軟性がある |
| 用途 | 一般的な日常使用に最適 | 専門的な業務に対応 | 特殊なニーズに合わせて調整可能 |
<table class="c-table">
<colgroup>
<col><!-- col要素で幅指定 -->
<col><!-- col要素で幅指定 -->
<col><!-- col要素で幅指定 -->
</colgroup>
<thead>
<tr>
<th></th>
<th scope="col">タイプA</th>
<th scope="col">タイプB</th>
<th scope="col">タイプC</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">特徴</th>
<td>シンプルで使いやすい</td>
<td>多機能で拡張性が高い</td>
<td>カスタマイズ可能で柔軟性がある</td>
</tr>
<tr>
<th scope="row">用途</th>
<td>一般的な日常使用に最適</td>
<td>専門的な業務に対応</td>
<td>特殊なニーズに合わせて調整可能</td>
</tr>
</tbody>
</table> thead付きテーブル（equal）
| タイプA | タイプB | タイプC | |
|---|---|---|---|
| 特徴 | シンプルで使いやすい | 多機能で拡張性が高い | カスタマイズ可能で柔軟性がある |
| 用途 | 一般的な日常使用に最適 | 専門的な業務に対応 | 特殊なニーズに合わせて調整可能 |
<table class="c-table" data-config="equal">
<colgroup>
<col><!-- col要素で幅指定 -->
<col><!-- col要素で幅指定 -->
<col><!-- col要素で幅指定 -->
<col><!-- col要素で幅指定 -->
</colgroup>
<thead>
<tr>
<th></th>
<th scope="col">タイプA</th>
<th scope="col">タイプB</th>
<th scope="col">タイプC</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">特徴</th>
<td>シンプルで使いやすい</td>
<td>多機能で拡張性が高い</td>
<td>カスタマイズ可能で柔軟性がある</td>
</tr>
<tr>
<th scope="row">用途</th>
<td>一般的な日常使用に最適</td>
<td>専門的な業務に対応</td>
<td>特殊なニーズに合わせて調整可能</td>
</tr>
</tbody>
</table> thead付きテーブル（tbody thなし）
| タイプA | タイプB | タイプC |
|---|---|---|
| シンプルで使いやすい | 多機能で拡張性が高い | カスタマイズ可能で柔軟性がある |
| 一般的な日常使用に最適 | 専門的な業務に対応 | 特殊なニーズに合わせて調整可能 |
<table class="c-table" data-config="equal">
<colgroup>
<col><!-- col要素で幅指定 -->
<col><!-- col要素で幅指定 -->
<col><!-- col要素で幅指定 -->
<col><!-- col要素で幅指定 -->
</colgroup>
<thead>
<tr>
<th scope="col">タイプA</th>
<th scope="col">タイプB</th>
<th scope="col">タイプC</th>
</tr>
</thead>
<tbody>
<tr>
<td>シンプルで使いやすい</td>
<td>多機能で拡張性が高い</td>
<td>カスタマイズ可能で柔軟性がある</td>
</tr>
<tr>
<td>一般的な日常使用に最適</td>
<td>専門的な業務に対応</td>
<td>特殊なニーズに合わせて調整可能</td>
</tr>
</tbody>
</table> thead付きテーブル／SPスクロール
スマホサイズにするとスクロールアイコンが表示されます。
| 初級レベル | 中級レベル | 上級レベル | |
|---|---|---|---|
| 基本スキル | 基礎知識習得 | ||
| 実践的スキル開発 | |||
| マスタリングコース | |||
| 専門分野（選択制） | プロジェクト管理研修 | ||
| リーダーシップ開発プログラム | |||
<div class="c-scrollable">
<table class="c-table" data-config="equal">
<colgroup>
<col><!-- col要素で幅指定 -->
<col><!-- col要素で幅指定 -->
<col><!-- col要素で幅指定 -->
<col><!-- col要素で幅指定 -->
</colgroup>
<thead>
<tr>
<th class="u-text-center"></th>
<th class="u-text-center">初級レベル</th>
<th class="u-text-center">中級レベル</th>
<th class="u-text-center">上級レベル</th>
</tr>
</thead>
<tbody>
<tr>
<th class="u-text-center u-align-middle" rowspan="3">基本スキル</th>
<td class="u-text-center">基礎知識習得</td>
<td></td>
<td></td>
</tr>
<tr>
<td class="u-text-center" colspan="2">実践的スキル開発</td>
<td></td>
</tr>
<tr>
<td colspan="2"></td>
<td class="u-text-center">マスタリングコース</td>
</tr>
<tr>
<th class="u-text-center u-align-middle" rowspan="5">専門分野<br aria-hidden="true"><span class="u-font-normal">（選択制）</span></th>
<td class="u-text-center" colspan="3">プロジェクト管理研修</td>
</tr>
<tr>
<td class="u-text-center" colspan="3">リーダーシップ開発プログラム</td>
</tr>
</tbody>
</table>
</div>