データテーブルには、読みやすいようにさまざまな情報が列と行に一覧表示されます。 データは通常、テキストラベル付きの部分的な数値です。 例として、誰かが1日に何カロリーを食べるかを示すデータテーブルがあります。 データテーブルをオンラインで作成するには、HTMLまたはより複雑なCSSブラウザ言語を使用します。 最終的なテーブルは、スプレッドシートまたは紙に作成されたデータテーブルと同じように見えます。 唯一の違いはバックグラウンドコーディングです。これは、ソースコードを見ない限り見られません。 コーディングは、HTMLエディター、テキスト、またはその他の方法で作成できます。 データを入力し、いくつかの属性を設定し、すべてのテーブルコーディングを作成する機能を提供するオンラインサイトはたくさんあります。 オンラインデータテーブルは通常、Webページの一部として使用されます。 データテーブルは、販売アイテムなどのカテゴリを持つアイテムのリストを作成するためによく使用されます。 一部のWebページは、情報の統計を表示するためにそれらを使用します。 データテーブルはオフラインで印刷やレポートに使用できますが、通常は使用することをお勧めします Microsoft Office Excelなどのスプレッドシートソフトウェア。これは、作業用のより多くの機能を提供します。 データ付き。 このガイドでは、メモ帳を使用してHTMLデータテーブルを作成する方法を示します。
HTMLエディタまたは通常のメモ帳テキストドキュメントを開いて、HTMLコードを入力します。 HTMLコーディングに慣れている場合は、メモ帳が適切に機能します。 HTMLエディターは反復的なタスクを高速化しますが、Frontpageのように、Webページの速度を低下させる可能性のある不要なコーディングを追加するものもあります。 最善の方法は、最初にHTMLエディターでコードを記述してから、戻ってコードを手動で編集してクリーンアップすることです。
境界線、幅、背景色、フォント色のテーブル属性を決定します。 表を読みやすくするには、Webページのレイアウト、幅、色、およびその他の属性を考慮する必要があります。 また、データに必要な行と列の数を決定する必要があります。 テーブル属性の定義を開始します。 （私たちの例は、各平日の昼食と夕食に食べられたカロリー数を示しています。 3つの列（Day、Lunch、Dinner）と7つの行（ラベル用に2つ、平日ごとに1つ）が必要です。
テーブルとデータセルの周囲に境界線を追加します。 境界線は、見やすいようにデータをセルに分割します。 ピクセル単位で測定され、使用しない場合は0の値を指定できます。 通常、1ピクセルまたは2ピクセルの境界線で問題ありません。 ボーダーのタグは
bgcolor = border = "CHOSEN_BORDER_WIDTH"
ボーダーの色はタグで変更できます
bordercolor = "CHOSEN_COLOR"
これは、赤や黒、6桁の16進カラーコードなどの基本的な色の用語を利用します。 16進数はより多くの色を提供します。 この例では、border = "2"とbordercolor = "black"を使用しています。
テーブル全体の幅を決定します。 ピクセルまたは画面サイズのパーセントで測定されます。 ピクセルは決定的なものであり、パーセンテージを使用すると、テーブルをさまざまな画面サイズに調整できます。 行全体のデータの幅に基づいて幅を判断してみてください。 後でテーブルが薄すぎたり広すぎたりすることがわかった場合は、テーブルを変更できます。 この例では、width = "175"を使用しています。
データセルの背景色を設定します。 ページの背景色とは異なり、コントラストがよくなります。 タグは
bgcolor = "CHOSEN_COLOR"
ボーダーカラーと同じです。 この例では、bgcolor = "white"を使用しています。
セル内のテキストのフォントの色を設定します。 読みやすいように、色が背景とよく対照的であることを確認してください。 ライトオンダークまたはダークオンライトは常に最適に機能します。 タグは
font = "CHOSEN_COLOR"
この例はfont = "black"で、白い背景とよく対照的です。
左矢印と右矢印の間に、タグ属性の間にスペースを入れて、前のテーブルタグから始めて、完全なテーブルタグを書き出します。 「テーブル」が前面にある限り、タグの順序は重要ではありません。
列幅を決定します。 各列の幅は、テーブル全体の幅によって異なります。 テーブルの幅を取得し、それをセルの数で割って、均等なサイズの列を取得します。 必要に応じて、列の幅を調整しますが、合計がテーブルの幅を超えることはできません。 1つのセル幅が変更された場合、他のセルを調整してテーブル幅を合計する必要があります。 （この例では、幅が175で、行ごとに3つの列があるため、約59の均等分割になります。 実際の分割は70、60、40です。）
データの追加を開始します。 まず、新しい行を開始し、コードを含むテーブル行を追加します
セルのデータを入力します。 このコードを使用して空白のセルを表す：
タグでセルを閉じます. bordercolorタグは、必要に応じてセルの境界線の色を指定するために使用されます。 省略した場合は、デフォルトのテーブルbordercolorが使用されます。 この例の最初のセルコードは次のとおりです。
行のすべてのセルが完了するまで、それぞれが新しい行にテーブルデータセルを作成することを繰り返します。 次に、タグで行を終了します. 同じプロセスで次の行を開始します。
でテーブルコードを閉じます 鬼ごっこ。 2行のデータの後で終了した場合の最終的なテーブルコードは次のとおりです。
必要なもの
- HTMLエディターまたはメモ帳
- データ