2012-01-17 6 views
9

私はマークアップする必要がある、次の内容が含まれています。2列テーブルまたはdl?

コースの要件

course requirements

日付

dates

質問がにするかどうかです2列の数字を使用するtable要素またはdldescription list)要素です。可能であれば、具体的なインスタンスごとに応答を行い、次に応答を一般的にとしたいと思います。特に、tableにヘッダーがない(または必要な)場合は、これらの要素を決めるのが難しいです。

注:私の質問はではなく、これらの要素のスタイルを設定する必要があります。私はセマンティクスを決めた後、プレゼンテーションに行きます。

EDIT:HTML5ドラフトに準拠している回答は、古いHTML4の推奨事項に準拠した回答より優先されます。

答えて

0

2つの例で何も定義していないので(キー:値のタイプ情報を表示しています)、2列の表を使用します。 dlタグ(セマンティクスの意味で)は、定義のみまたは記述のために使用されます。たとえば、<dl>タグを使用してコードをコメントする人もいます。

あなたが自分自身に言うことができる選んだしようとしている:「これは」(例えばコホート#が)

-1

あなたは固定+ labelであなたのデータでスタイルULを使用することができ、「これ」(2月10日)を意味しません。

2

これらは私にとってはテーブルのようです。 dlは名前、値ペアリストとして使用され、各名前は1つ以上の値を持つことができます。私はコホート教育が10ポイントに関連していることを示しているspecificationでは何もありません

<dl> 
<dt>Class</dt> 
<dd>Cohort Teaching</dd> 
<dd>My other Class</dd> 
<dt>Points</dt> 
<dd>10</dd> 
<dd>20</dd> 
</dl> 

あなたは、たとえば複数のグループ間の相関を置くことができるとは思いません。各グループは自己完結型です。

少なくとも私はDLを使ってマークアップしませんでした。私はテーブルを使用します。

+0

はい、私は '1グループの' dd'と別のグループで 'dd'の間に相関がないdl'に同意するものとします。有効な唯一の相関は 'dt'とそれに続く' dd'です。したがって、あなたがあなたの例で行ったやり方で 'dl'を使ってコンテンツをマークアップすべきではないということに私は同意するでしょう。しかし、各エントリを 'dt'の' 'left column 'と' dd'の '' right column' 'に入れることができるかもしれません。たとえば、 '

コホート教育
10 pts
'などです。このようにして、相関が明示されます。 – chharvey

6

テーブル要素は、セマンティクスの観点から、ニーズに最も適しています。

W3Cには、tableという要素「allows authors to arrange data -- text, preformatted text, images, links, forms, form fields, other tables, etc. -- into rows and columns of cells」が記載されています。

W3Cは、dlタグが "consist of two parts: a term and a description"のリストであることを示しています。 「10ポイント」 「コホート教育」という用語の記述ではないため、これは適切な要素ではありません。

+2

実際にはdlは完璧ではありません。あなたがリンクしている仕様からは、「DLの別のアプリケーションは、たとえば、ダイアログにマークを付けるためのもので、DTはスピーカーの名前を付け、DDは単語を含むものです。また、HTML5では、このhttp://www.w3.org/TR/html-markup/dlをさらにサポートする記述リストと呼ばれています。html – Alistair

+0

@Alistairこの目的のために 'dl'タグを使うことはできますが、意味的には正しくありません。対話をマークアップする(あなたが参照したように)のは、名前 - 対話のグループ化があるという点で、用語 - 記述のグループ化に似ていますが、OPは対話に関係せず、行x列の設計で構成された目次を記述しています'テーブル 'にぴったりです。最終的に 'dl'のスタイルを上にして、' table'と似たようにします。 –

+0

私はまだ2つについて未定です。 [dl要素のHTML5ドキュメント](http://www.w3.org/html/wg/drafts/html/master/grouping-content.html#the-dl-element)のコード例をご覧ください。用語と説明のペアのために予約されているだけではありません。 – chharvey

14

ルール:テーブルバージョンにヘッダーを付けることができる場合は、でなく、を定義リストにする必要があります。

もう1つの経験則:がない場合は、をテーブルバージョンにヘッダーを付ける場合は、定義リストにする必要があります。

これは、良いリストはテーブルとしては意味をなさないはずです。逆もまた同様です。

身長
180センチメートル

180キロ
電話
555-5555
123-4567

:ここで良い定義リストがどのように見えるかの例を示します。これをテーブルに変換しようとします...

 
Terms   Definitions 
------------------------ 
Height  180cm 
Weight  180kg 
Telephones 555-5555 
       123-4567 

列ヘッダーを見てください。それはちょうど "用語"と "定義"です!

身長、体重、電話は、全く異なる定義が付けられた全く異なるものです。世界で555-5555と180cmは同じ列に属していますか?意味がない!

しかし、時にはあなたは、ヘッダーとして何の用語や定義がありません。この

 
Height  | 180cm 
Weight  | 180kg 
Telephones | 555-5555 
       | 123-4567 

のような表を参照してください、細胞のヘッダは、最初の列の上にあると想定されています。あなたがテーブルを間違って使用しているようなテーブルを持っているときにIMHOを使うと、代わりに定義リストを使うべきです。テーブルを正当化するには、複数の行が必要であり、各行の各セルは列のヘッダーで定義できます。例えば、このような

何か:

 
Name Height Weight 
------------------------ 
John 180cm  180kg 
Jack 170cm  155kg 

ジョンとジャックは名前です。 180cmと170cmは高さです。 180kgと155kgは体重です。セルの行と列との重要な関係があり、その重要な関係を切り離さずに定義リストに入れることはできません。したがって、この場合はテーブルを使用する必要があります。

TL; DR: 質問の2つの列テーブルにヘッダーを付けることができます。だからテーブルでなければなりません。

参照:

 
Class       Required Points 
--------------------------------------------- 
Cohort Teaching    10 pts. 
Cohort Research and Report 20 pts. 
+0

ウェブサイトがアクセス可能になりたい場合(すべてのウェブサイトがそうである必要がある場合)、定義リストに注意してください。スクリーンリーダーに問題があります。https://snook.ca/archives/html_and_css/definition-lists-v-tablesを参照してください。 –

関連する問題