テーブル

テーブル

01・上下ライン

th1td1
th2td2
<table class="table_01" border="0" cellspacing="0" cellpadding="0">
 <col width="30%" />
 <col width="70%" />
<tbody>
<tr>
<th>th1</th><td>td1</td>
</tr>
<tr>
<th>th2</th><td>td2</td>
</tr>
</tbody>
</table>

02・ライン

th1td1
th2td2
<table class="table_02" border="0" cellspacing="0" cellpadding="0">
 <col width="30%" />
 <col width="70%" />
<tbody>
<tr>
<th>th1</th><td>td1</td>
</tr>
<tr>
<th>th2</th><td>td2</td>
</tr>
</tbody>
</table>

03・th要素色付き

th1td1
th2td2
<table class="table_03" border="0" cellspacing="0" cellpadding="0">
 <col width="30%" />
 <col width="70%" />
<tbody>
<tr>
<th>th1</th><td>td1</td>
</tr>
<tr>
<th>th2</th><td>td2</td>
</tr>
</tbody>
</table>

04・ストライプ

classに「striped」を追加することで1行毎に色が付きます。

th1td1
th2td2
th2td2
th2td2
<table class="table_01 striped" border="0" cellspacing="0" cellpadding="0">
 <col width="30%" />
 <col width="70%" />
<tbody>
<tr>
<th>th1</th><td>td1</td>
</tr>
<tr>
<th>th2</th><td>td2</td>
</tr>
</tbody>
</table>

05・スマホ対応スクロール

classに「scroll」を追加します。theadにthの項目を入れ、tdはtbodyで囲います。
※rowspan等のセルの結合と改行<br>は対応していません。

th1th2th3
td1テキストテキストtd2テキストテキストtd3テキストテキスト
td1テキストテキストテキストtd2テキストテキストテキストtd3テキストテキストテキスト
<table class="table_03 scroll" border="0" cellspacing="0" cellpadding="0">
<thead>
<tr>
<th>th1</th><th>th2</th><th>th3</th>
</tr>
</thead>
<tbody>
<tr>
<td>td1テキストテキスト</td><td>td2テキストテキスト</td><td>td3テキストテキスト</td>
</tr>
<tr>
<td>td1テキストテキストテキスト</td><td>td2テキストテキストテキスト</td><td>td3テキストテキストテキスト</td>
</tr>
</tbody>
</table>
2017年3月9日