が含まれています タグ。テーブルの列セルを表すために使用されます。たとえば、td要素は Espresso を表すために使用されます および$2.00 最初のコーヒーエントリーで。 テーブルスタイリング
HTMLで表のスタイルを設定する方法はいくつかあります。 境界線
HTMLでは、テーブルにはデフォルトで境界線がありません。つまり、テーブルに境界線を表示する場合は、CSSを使用する必要があります。 CSS border属性は、HTMLテーブルに境界線を追加するために使用されます。
以前のテーブルの周りに黒一色の境界線を追加したいとします。このコードを使用してこれを行うことができます: table, th, td {
border: 1px solid black;
}
テーブルコードでこのスタイルを使用すると、テーブルが変更され、各セルとテーブル自体の周囲に境界線が含まれるようになります。改訂された表は次のとおりです:
これで、テーブルに境界線ができ、テーブル内のデータを読みやすくなりました。ただし、上記で作成したスタイルは、すべてのセルの周囲に境界線を配置し、各境界線を分離します。各境界線を1つに折りたたむ場合は、border-collapseプロパティを使用できます。このタスクを実行するために使用するコードは次のとおりです。 table {
border-collapse: collapse
}
新しいテーブルは次のようになります:
ご覧のとおり、テーブルには、各セルとテーブル自体の周囲に1つの境界線ではなく、1つの境界線があります。 見出しを揃える
デフォルトでは、見出しはセルの中心に揃えられます。見出しをセルの左または右に揃える場合は、text-alignプロパティを | に指定できます。 テーブル内のタグ( | を思い出してください) タグは見出しを指定するために使用されます。
使用するコードは次のとおりです。 th {
text-align: left;
}
このスタイルを上からテーブルに適用すると、次のテーブルが作成されます。
上記の表は、列見出しを表の左側に揃えています。
HTMLテーブルに適用できるスタイルは他にもたくさんありますが、このチュートリアルでは、テーブルの境界線と折りたたまれた境界線に焦点を当てています。今後は、チュートリアルのこの部分で定義したスタイルを使用して、データを読みやすくします。 複数の行と列のスパン
テーブルを操作するときは、セルを複数の行または列にまたがらせたい場合があります。
たとえば、以前の価格列を2つの列にまたがらせたいとします。そこで、colspan属性とrowspan属性が登場します。Rowspanはテーブル内の複数の行にまたがるのに使用され、colspanはテーブル内の複数の列にまたがるのに使用されます。
これは、colspanを使用して Price にまたがるテーブルの例です。 2列にわたる列: <table>
<tr>
<th>Coffee</th>
<th colspan="2">Price</th>
</tr>
<tr>
<td>Espresso</td>
<td>$2.00 (new)</td>
<td>$2.00 (old)</td>
</tr>
</table>
表は次のように表示されます:
ご覧のとおり、価格列は2行にまたがっています。さらに、同じ方法で行スパンを使用して、複数の行にまたがるセルを作成できます。
メニューの特定のコーヒーに関する詳細を格納するテーブルがあるとします。
毎月最終日にコーヒーを購入するように顧客を誘導するために適用されるコーヒーの割引価格と、同じ見出し Price の下に表示される通常価格に関する情報が必要です。 、価格を区別するためのラベル付き。次のコードを使用して、このタスクを実行できます。 <table>
<tr>
<th>Coffee</th>
<td>Espresso</td>
</tr>
<tr>
<th rowspan="2">Price</th>
<td>$2.00 (regular)</td>
</tr>
<tr>
<td>$1.80 (discounted)</td>
</tr>
</table>
表の出力は次のとおりです。
この例では、 Price ラベルは2行にまたがっています。 テーブルヘッダー、本文、およびフッターの定義
テーブルを操作する場合、データをより適切に構造化するために使用される3つのタグがあります。
|
---|