Linuxサーバより愛を込めて。

Linux(Ubuntu)サーバとダーツを愛する中年サラリーマンの日記。

HTMLとCSS

HTMLでテーブルを表現する

2014/02/09

今回は珍しくhtmlに関する事を少々。

 

以前どこかでお話したとおりhtmlも殆ど知らないワタクシ、少しずつ勉強をしているのですがそこで覚えたことも書いておかないと満足に覚えていられない自分の脳みそが憎い・・・

 

とぼやいていても仕方ないのでここに書き残します。

 

今回のテーマは「テーブル」。

 

きっかけはWordpressの投稿内で表を使用したいと思ったことでした。

で、Google先生に尋ねたらすぐにわかりました。

 

罫線の太さや背景の色など細かな設定も可能なんですが、現在の自分が使用するのはWordpres内が中心のため、書式はstyle.cssで定義されているものを生かしたほうがデザイン的に調和が取れると予想されるためひとまず触れません。

 

では使用法を。

これ(↓)は以前Apache2の設定の時に作った表なんですが、正にこれを作る時にテーブルに関するタグを勉強したのです。

設定ファイル名 内容
/etc/apache2/apache2.conf 主要な設定ファイル
/etc/apache2/mods-enabled/~ 現在有効なモジュールが配置されている。/etc/apache2/mods-available/以下のファイルに対するシンボリックリンクを作成することで有効化する。
/etc/apache2/mods-available/~ 現在インストールされているApache2のモジュールが格納されている。
/etc/apache2/sites-enables/~ 現在有効なサイトに関する固有設定が置かれるディレクトリ。/etc/apache2/sites-available/以下の設定ファイルに対するシンボリックリンクを作成することで有効化する。
/etc/apache2/sites-available/~ サイトに関する固有設定を記述したファイルが置かれるディレクトリ。
/etc/apache2/ports.conf Apache2で使用するポート番号に関する設定ファイル。デフォルトでは80番が割り当てられている。
/etc/apache2/conf.d/ Apache2に関する追加の設定ファイルを置くことができるディレクトリ

 

これを例にご説明しましょう。

 

まずはテーブルそのものを定義するためのタグ、<table>です。

この<table>~</table>で囲まれた範囲がテーブルとなります。

 

この中に各行を表現する<br>~</br><tr>~</tr>タグと、更に行においてタイトル(ヘッダ)を表す<th>~</th>とデータを表す<td>~</td>を組み合わせることで使用します。

 

実際に使用したソースを記述しておくと
<table width="650">
<tbody>
<tr>
<td>設定ファイル名</td>
<td>内容</td>
</tr>
<tr>
<td>/etc/apache2/apache2.conf</td>
<td>主要な設定ファイル</td>
</tr>
<tr>
<td>/etc/apache2/mods-enabled/~</td>
<td>現在有効なモジュールが配置されている。/etc/apache2/mods-available/以下のファイルに対するシンボリックリンクを作成することで有効化する。</td>
</tr>
<tr>
<td>/etc/apache2/mods-available/~</td>
<td>現在インストールされているApache2のモジュールが格納されている。</td>
</tr>
<tr>
<td>/etc/apache2/sites-enables/~</td>
<td>現在有効なサイトに関する固有設定が置かれるディレクトリ。/etc/apache2/sites-available/以下の設定ファイルに対するシンボリックリンクを作成することで有効化する。</td>
</tr>
<tr>
<td>/etc/apache2/sites-available/~</td>
<td>サイトに関する固有設定を記述したファイルが置かれるディレクトリ。</td>
</tr>
<tr>
<td>/etc/apache2/ports.conf</td>
<td>Apache2で使用するポート番号に関する設定ファイル。デフォルトでは80番が割り当てられている。</td>
</tr>
<tr>
<td>/etc/apache2/conf.d/</td>
<td>Apache2に関する追加の設定ファイルを置くことができるディレクトリ</td>
</tr>
</tbody>
</table>

 

となります。

これが上の表になる、というわけです。

 

ひとまずは丸写しみたいな感じでも何回か使用しているうちに身に付くことを信じて・・・

-HTMLとCSS
-, ,