複数クラス指定
<div class="sample1 sample2"></div>
| ポイント | 説明 | 備考 |
|---|---|---|
| sample1 sample2 | クラスとクラスの間を半角スペースで区切ること |
表
見出しが横向きの表
<table border="1">
<thead>
<tr>
<th>見出し1</th>
<th>見出し2</th>
</tr>
</thead>
<tbody>
<tr>
<td>内容1</td>
<td>内容2</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>フッタセル1</td>
<td>フッタセル2</td>
</tr>
</tfoot>
</table>
タグの説明
| タグ | 説明 | 備考 |
|---|---|---|
| <thead> | 「table header」表の行（水平方向）をグループ化するタグです。<thead>～</thead>で囲まれた内容は、表のヘッダ部分としてグループ化され、<table>の中はヘッダ部分を表す<tread>～</tread>部分、ボディ（表の本体）部分<tbody>～</tbody>、フッタ部分<tfoot>～</tfoot>に分けられます。このように分けることでブラウザはヘッダとフッタを先読みして表示したり、ヘッダとフッタを固定表示したままボディ部分だけをスクロールさせたりすることができます。ただし、これらのタグに対応していないブラウザの場合は、フッタをボディより上に表示してしまうことがあります。 https://html-coding.co.jp/annex/dictionary/html/thead/ |
|
| <tr> | 「table row」の略で表の行部分（横方向）を指定するタグです。 https://html-coding.co.jp/annex/dictionary/html/tr/ |
|
| <th> | 「table header」の略で、表の見出しやタイトルとなるヘッダセルを作成するタグです。 https://html-coding.co.jp/annex/dictionary/html/th/ |
|
| <td> | 「table data」の略で、テーブルセルの内容を指定します。 https://html-coding.co.jp/annex/dictionary/html/td/ |
条件一致で表示
<html lang="ja" xmlns:th="http://www.thymeleaf.org">
<!--中略-->
<!--一覧表示-->
<div th:if="${sampleList} !=null">
<table class="table" border="1">
<thead>
<tr>
<th>名前</th>
<th>年齢</th>
<th>趣味</th>
</tr>
</thead>
<tbody>
<tr th:each="entity:${sampleList}" th:object="${entity}">
<td><a th:href="@{/hoge(sampleName=*{sampleName})}" th:text="*{sampleName}"></a>名前にはリンク</td>
<td th:text="*{age}">年齢</td>
<td th:text="*{hoby}">趣味</td>
</tr>
</tbody>
</table>
</div>
見出しが縦向きの表
<table border="1">
<thead>
<tr>
<th>見出し1</th><td>内容1</td>
</tr>
</thead>
<tbody>
<tr>
<th>見出し2</th><td>内容2</td>
</tr>
<tr>
<th>見出し3</th><td>内容3</td>
</tr>
</tbody>
<tfoot>
<tr>
<th>見出し4</th><td>フッタセル1</td>
</tr>
</tfoot>
</table>
テーブル内で列の結合
<td colspan="5">
| ポイント | 説明 | 備考 |
|---|---|---|
| colspan | 自分の列も含めて5列結合する | 表・テーブル・マージ・merge |
タグに複数のクラスを設定
<div class="sample1 sample2"></div>
| ポイント | 説明 | 備考 |
|---|---|---|
| 複数classの設定 | クラスとクラスの間を半角スペースで区切る |