ハイウェブの機能紹介デモサイトです。

スタイルテーブルStyled Table

ショートコードの「スタイルテーブル」ではコンテンツにデザインされたテーブルを追加することができます。

Column1 Column2 Column3 Column4
Jacob Description 180Cm 64Kg
Sophia Description 170Cm 58Kg
William Description 190Cm 80Kg
Olivia Description 168Cm 54Kg
All Description avg:177Cm avg:64Kg

ショートコード

[styled_table style="1" responsible="true"]
<table width="100%">
<thead>
<tr>
<th>Column1</th>
<th>Column2</th>
<th>Column3</th>
<th>Column4</th>
</tr>
</thead>
<tbody>
<tr>
<th>Jacob</th>
<td>Description</td>
<td>180Cm</td>
<td>64Kg</td>
</tr>
<tr>
<th>Sophia</th>
<td>Description</td>
<td>170Cm</td>
<td>58Kg</td>
</tr>
<tr>
<th>William</th>
<td>Description</td>
<td>190Cm</td>
<td>80Kg</td>
</tr>
<tr>
<th>Olivia</th>
<td>Description</td>
<td>168Cm</td>
<td>54Kg</td>
</tr>
<tr>
<th>All</th>
<td>Description</td>
<td>avg:177Cm</td>
<td>avg:64Kg</td>
</tr>
</tbody>
</table>
[/styled_table]
Column1 Column2 Column3 Column4
Jacob Description 180Cm 64Kg
Sophia Description 170Cm 58Kg
William Description 190Cm 80Kg
Olivia Description 168Cm 54Kg
All Description avg:177Cm avg:64Kg

ショートコード

[styled_table style="2" responsible="true"]
<table width="100%">
<thead>
<tr>
<th>Column1</th>
<th>Column2</th>
<th>Column3</th>
<th>Column4</th>
</tr>
</thead>
<tbody>
<tr>
<th>Jacob</th>
<td>Description</td>
<td>180Cm</td>
<td>64Kg</td>
</tr>
<tr>
<th>Sophia</th>
<td>Description</td>
<td>170Cm</td>
<td>58Kg</td>
</tr>
<tr>
<th>William</th>
<td>Description</td>
<td>190Cm</td>
<td>80Kg</td>
</tr>
<tr>
<th>Olivia</th>
<td>Description</td>
<td>168Cm</td>
<td>54Kg</td>
</tr>
<tr>
<th>All</th>
<td>Description</td>
<td>avg:177Cm</td>
<td>avg:64Kg</td>
</tr>
</tbody>
</table>
[/styled_table]

オプション

  • style : テーブルのスタイルを1か2の数字で選びます。
  • responsible : レスポンシブル対応の設定します。[true or false]
  • class : classを設定します。