「HTML」カテゴリーアーカイブ

HTMLでテーブル(表)を作るには

名簿やスケジュールなどのデータを表形式で表すときは、テーブルを使用するとよいです。

テーブルの基本構造

HTMLでテーブル(表)を挿入するには

table要素(表全体)、tr要素(行)、td要素(セル)、th要素(見出しセル)を用いて指定します。

 

例えば、次の5行×2列の表を作成するには・・・

イベント名 インターネット活用講座
日時 4月12日(金)10:30~12:00
内容 facebook、Twitter、ブログの活用
場所 リズ札幌
料金 〇〇〇円(教材費込み)

(ちなみに↑の講座は架空ですので)

 

<table>(テーブルタグ)を入れてあげて、

<table border=”1″>
<tr>
<th>イベント名</th><td>インターネット活用講座</td>
</tr>
<tr>
<th>日時</th><td>4月12日(金)10:30~12:00</td>
</tr>
<tr>
<th>内容</th><td>facebook、Twitter、ブログの活用</td>
</tr>
<tr>
<th>場所</th><td>リズ札幌</td>
</tr>
<tr>
<th>料金</th><td>〇〇〇円(教材費込み)</td>
</tr>
</table>

<th></th>や<td></td>の間の文字を変えればいいだけなのです。

※<th></th>は見出しセルデータという意味(Table Header)

※<td></td>はセルデータという意味(Table Data)

また、

<tr></tr>は「行」という意味があります。

trはtable+rowの頭文字の略ですね。

row(ロウ)は「」という意味です。(ちなみに、column(カラム)は「」です。)

どっちがで、どっちがかわからなくなる方は、

rowは「ロウ」・・・「ロウ」・・・「ロウ」・・・・・・「ギョウ」(行)・・・(笑)

と音が似ているので、そう身体で覚えるといいですね。

 

サクラエディタ・・・半角スペースを表示するには

サクラエディタは、日本製のWindows用テキストエディタでで、フリーウェアとして配布されています。

HTMLやCSSをタグ打ちするのに使います。

他にも、純正の「メモ帳(無料)」や「Terapad(無料)」や「EmEditor(有料)」がありますが、
「サクラエディタ(無料)」は、多数の文字コードのサポート、検索、置換などの豊富な機能が使えたりします。
また、「Terapad」と同じくHTMLのタグに色がつくので、コーディングしやすくなっています。
サクラエディタの最新バージョン及びソースは、以下のWebページから入手可能です。
・Project Sakura-Editor
http://sakura-editor.sourceforge.net/

こちらからでもダウンロードできます↓
http://sakura-editor.softonic.jp/

 

このサクラエディタで、半角空白を表示するには、

[設定]-[タイプ別設定]を選択して、

TypeColor

ONにする(クリックする)と半角スペースを「 」の代わりに「U」の下半分で指定した設定で表示します。