生活情報オンライン

ITエンジニアが役立つ情報を発信します。

はてなブログ「表テーブル」の書き方

表テーブルの作り方あるいは書き方です。

完成図

クラウド名 容量 速度 機能 無料期間
AWS - - - -
GCP - - - -
SoftLayer - - - -
Azure - - - -

HTML

HTMLで作ろうと思うと次のように書きます。コピペしてみてください。

<table>
<tr>
<th>クラウド名</th>
<th>容量</th>
<th>速度</th>
<th>機能</th>
<th>無料期間</th>
</tr>
<tr>
<td>AWS</td>
<td>-</td>
<td>-</td>
<td>-</td>
<td>-</td>
</tr>
<tr>
<td>GCP</td>
<td>-</td>
<td>-</td>
<td>-</td>
<td>-</td>
</tr>
<tr>
<td>SoftLayer</td>
<td>-</td>
<td>-</td>
<td>-</td>
<td>-</td>
</tr>
<tr>
<td>Azure</td>
<td>-</td>
<td>-</td>
<td>-</td>
<td>-</td>
</tr>
</table>

th→table header
td→table data
と考えると分かりやすいですね。

はてなブログ

はてなブログでは簡単に表が作れます。
はてな記法モードで、次のように書きます。こちらもコピペどうぞ。

|*クラウド名|*容量|*速度|*機能|*無料期間|
|AWS|-|-|-|-|
|GCP|-|-|-|-|
|SoftLayer|-|-|-|-|
|Azure|-|-|-|-|


追記

はてなブログの方法で表を作ったときでも、セルのサイズを変更することが出来ます。次のように記述すると「クラウド名」「機能」のセル幅を100pxにすることが出来ます。インラインで幅指定したHTML要素を埋め込むんですね。この方法で色々な応用が利きそうですね。

|*<div style="width:100px;">クラウド名</div>|*容量|*速度|*<div style="width:100px;">機能</div>|*無料期間|
|AWS|-|-|-|-|
|GCP|-|-|-|-|
|SoftLayer|-|-|-|-|
|Azure|-|-|-|-|
クラウド名
容量 速度
機能
無料期間
AWS - - - -
GCP - - - -
SoftLayer - - - -
Azure - - - -




このへんの話はどの本を読んでも記載してありそうですけど一応オススメ紹介です。

HTML5&CSS3デザインブック (ステップバイステップ形式でマスターできる)

HTML5&CSS3デザインブック (ステップバイステップ形式でマスターできる)