HTML (ハイパーテキスト マークアップ言語) や XML などの他のマークアップ言語を扱うときは、多くの属性やタグに遭遇することになります。テーブルは、ユーザーが大量のデータを簡単にスキャン、比較、分析できるようにするために常に使用する必要がある属性です。
表を使用すると、ユーザーは記事全体を読まなくても、重要なポイント、結論、結果を一目で確認できます。 CSS を使用して、テーブルのスタイルを設定したり、外観を変更したりできます。
これらは、アプリケーションでテーブルのスタイルを設定する必要がある理由の一部です。
- 見た目の改善: 通常のテーブルは退屈で地味なものになる可能性があります。このようなテーブルのスタイルを設定すると、外観が改善され、ユーザーにとって魅力的なものになります。
- アクセシビリティの向上: テーブルをスタイリングすると、障害のある人でもテーブルにアクセスできるようになります。
- 可読性の向上: さまざまなスタイル設定手法を使用して、ユーザーが表に表示されるデータを簡単にざっと確認できるようにすることができます。
- ブランド化: アプリケーション全体のテーブルに一貫したフォントと色を適用すると、ブランド アイデンティティを強化できます。
- 検索エンジンに適しています: 検索エンジンで Web サイトを上位にランク付けしたい場合は、データを表形式で整理すると便利です。
HTML を使用して基本的なテーブルを作成する
HTML でテーブルがどのように機能するかを示すために、プロジェクト フォルダーを作成し、そのフォルダーに移動して 2 つのファイルを作成します。 index.html には HTML コードが含まれ、styles.css には CSS コード (スタイリング) が含まれます。
手順に従って進みたい場合は、次のコマンドを使用して開始してください。
mkdir Styling-HTML-Tables
cd Styling-HTML-Tables
touch Styling-HTML-Tables
これで、HTML テーブルの作成に役立つ基本的なプロジェクト フォルダーが完成しました。さまざまなプログラミング言語とその使用例、およびこれらの言語を使用している企業の例を紹介したいと思います。
HTML テーブルを作成するには、すべてのデータを
<table>...</table>
タグで囲む必要があります。
HTML ファイルで、HTML ドキュメントの基本構造を生成します。このコードを
<body>
タグ内に追加します。
<table>
<tr>
<th>Language</th>
<th>Common Uses</th>
<th>Companies Using</th>
</tr>
<tr>
<td>Java</td>
<td>Web apps, Android apps, enterprise applications</td>
<td>Google, Amazon, LinkedIn</td>
</tr>
<tr>
<td>Python</td>
<td>Data science, web dev, automation</td>
<td>Google, Dropbox,Spotify</td>
</tr>
<tr>
<td>JavaScript</td>
<td>Web dev, front-end dev, browser scripting</td>
<td>PayPal, Facebook, Netflix</td>
</tr>
<tr>
<td>C++</td>
<td>Game dev, systems programming, embedded systems</td>
<td>Tesla, Microsoft, Adobe</td>
</tr>
<tr>
<td>Swift</td>
<td>iOS development, macOS development</td>
<td>Apple</td>
</tr>
<tr>
<td>PHP</td>
<td>Web dev, server-side scripting, CMSs</td>
<td>WordPress, Wikipedia, Yahoo</td>
</tr>
</table>
このテーブルをよく見ると、
<table>
タグ内にさらにいくつかのタグが含まれていることに気づくでしょう。
<tr>
、
<th>
、および
<td>
。
これらのタグは次のことを行います。
-
<tr>、テーブル行は、<table>要素内に囲まれています。<tr>タグは 1 つ以上の<th>要素と<td>要素を囲むことができます。 -
<th>、テーブルヘッダーは、<tr>タグ内に含まれます。デフォルトでは、その内容は太字で表示されます。 -
<td>、テーブル データは、テーブル セル内のデータの内容を記述します。
上で書いたコードをレンダリングすると、これがブラウザ上に表示されます。
テーブルのスタイル設定に使用される CSS プロパティ
上記で作成したテーブルは完全に機能します。ただし、スタイルが良くないため、多くの点が望まれます。目的のスタイルを実現し、表を視覚的に魅力的なものにするために、CSS を使用します。
作成した CSS ファイルを覚えていますか?今こそそれを使う時です。ただし、スタイルを機能させるには、まず CSS ファイルを HTML ファイルにインポートする必要があります。 CSS ファイルには、styles.css という名前を付けました。 HTML ドキュメントの
<head>
セクションに次の行を追加します。
<link rel="stylesheet" href="styles.css">
これで、テーブルのスタイルを設定する準備ができました。次のようにスタイルを設定できます。
#1. 国境
表のセルの周囲に枠線を追加できます。これを実現するには、
<th>
要素と
<td>
要素に border プロパティを定義します。境界線を 2px に設定できます。
th, td {
border: 2px solid orange;
}
境界線の値を 2 に設定し、色としてオレンジを追加しました。
新しいページをレンダリングすると、次のように表示されます。
#2. ボーダーコラプス
上のスクリーンショットを確認すると、すべてのセルの境界線の間にスペースがあることがわかります。 border-collapse プロパティは、テーブル内の隣接するセルが境界線を共有するかどうかを決定します。
セルに境界線を共有したい場合は、このコードを CSS ファイルに追加します。
table {
border-collapse: collapse;
}
ページをレンダリングすると、次のようにセルが境界線を共有していることがわかります。
セルに異なる境界線を持たせたい場合は、これを CSS ファイルに追加します。
table {
border-collapse: separate;
}
レンダリングされたページは次のように表示されます。
#3. 境界線の間隔
border-space プロパティを使用すると、テーブル内のセル間に小さなスペースを作成できます。 CSS ファイルのテーブル クラス内にルールを設定します。
このプロパティが機能するには、
border-collapse: separate;
を使用する必要があります。財産。
次のようにテーブル クラスを作成できます。
table {
border-collapse: separate;
border-spacing: 3px;
}
セルの境界線には 3px のスペースがあります。
テーブルをレンダリングすると、次のように表示されます。
#4. テーブルレイアウト
Table-layout プロパティはテーブルの性質を決定します。常に同じ長さのテーブルを作成できます。一方、コンテンツに基づいて変更されるテーブルを作成することもできます。
同じようなサイズのセルが必要な場合は、table-layout プロパティを固定として設定できます。
table-layout: fixed;
テーブル クラスの最終的なコードは次のようになります。
table {
border-collapse: collapse;
border-spacing: 3px;
table-layout: fixed;
}
内容に基づいてセルを変更したい場合は、table-layout プロパティを auto に変更できます。
table-layout: auto;
CSS コードの最終的なテーブル クラスは次のようになります。
表の最後のセルを確認して、これらの単語を追加したことに注意してください。 MailChimp など。
テーブルのレイアウトは内容に基づいて柔軟であるため、最後の行のセルが残りのセルよりも大きくなっていることがわかります。
これまで取り上げてきたスタイリングは、テーブル全体に焦点を当てていました。行、セル、ヘッダーの背景色、フォント、テキスト配置プロパティを変更することで、個々のクラスに焦点を当てることができるようになりました。
これらのプロパティは次のようにスタイル設定できます。
#5. 背景色
一番上の行の背景を黄緑色に変更できます。
:first-child
疑似クラス セレクターを使用すると、目的を達成できます。
このコードを CSS コードに追加します。
tr:first-child {
background-color: yellowgreen;
}
最終的に表示されるコードは次のようになります。
#6. フォント
テーブル内の特定の行、列、セルのフォント スタイルやフォント サイズを変更できます。
フォント スタイルを変更する対象となるのは、ページの最後の列の内容 (使用している企業) です。
td:last-child
クラス セレクターをターゲットにして、この列のすべての内容を斜体にします。次のコードを CSS ファイルに追加できます。
td:last-child {
font-style: italic;
}
レンダリングされたページをリロードすると、最終的な出力は次のようになります。
最初の列のフォントの色とサイズを変更して、一意にすることもできます。
次のコードを CSS ファイルに追加します。
tr td:first-child {
color: red;
font-size: x-large;
font-weight: bolder;
}
ページをレンダリングすると、次のことに注意してください。最初の列 (言語) の内容はフォント サイズが大きく、赤色で太字になっています。
テーブルをレスポンシブにする方法
作成したテーブルは小さな画面には反応しない可能性があります。 Chrome の開発者ツールまたは この ような外部ツールを使用して、コードが応答するかどうかをテストできます。
実行できるアプローチはいくつかありますが、ここでは 1 つだけを説明します。
次の手順を実行します;
-
コード内の
<table>要素の幅を設定します。
table {
width: 100%;
border-collapse: collapse;
table-layout: fixed;
}
-
セル内に長い単語を作成するには、td と th に
word-break設定します。
th, td {
border: 2px solid orange;
word-break: break-word;
}
テーブルのスタイル設定のベスト プラクティス
CSS は、一度知ってしまえば特に楽しくなります。以下は、テーブルのスタイルを最適化するためのベスト プラクティスの一部です。
- 外部スタイル シートを使用する: インライン スタイルを使用するオプションもありましたが、外部シートを選択しました。さまざまなテーブル間でスタイルを再利用できるため、開発時間を短縮できます。
- シンプルにしましょう: 夢中 になってテーブルを飾りすぎてしまう可能性があります。ただし、常にシンプルなデザインを維持し、テーブルをスキャンして読み取れるようにしてください。
- 表に枠線を追加する: 枠線を使用すると、表が読みやすくなり、スキャンしやすくなります。
- 一貫した色を使用する: Web ページ全体に複数の表がある場合は、一貫した色とフォントを使用するようにしてください。ブランドカラーを使用すると、ブランドの認知度を高めることができます。
- テーブルの応答性を高める: エンド ユーザーのデバイスの画面サイズは決して分からないかもしれません。
- キャプションを使用してテーブルを説明する: キャプションは、テーブルの内容を簡単に説明します。
- 空白を使用して表を区切ります。 複数の表が連続している場合は、空白を追加し、それに応じてキャプションを付けます。
結論
これで、基本的な HTML テーブルを作成してスタイルを設定できるようになったと思います。 HTML と CSS は範囲が広いため、すべてをカバーできていない可能性があります。キャプチャするデータの性質に応じて、より小さいテーブルまたはより大きいテーブルを作成できます。
CSS とそれを使用して UI を改善する方法について詳しく知りたい場合は、CSS チートシートを確認してください。
![2021 年に Raspberry Pi Web サーバーをセットアップする方法 [ガイド]](https://i0.wp.com/pcmanabu.com/wp-content/uploads/2019/10/web-server-02-309x198.png?w=1200&resize=1200,0&ssl=1)
