HTML을 사용하여 여러 열 목록을 표시하는 가장 좋은 방법

간단한 두 열 목록을 표시해야합니다. 옵션으로는 <table>, <ul> 또는 <dl>입니다. 한 가지 방법이 다른 것보다 "더"나은가요? 전 사실 등HTML을 사용하여 여러 열 목록을 표시하는 가장 좋은 방법

+--------------+-----------------+ 
| Name   | John Doe  | 
| Address  | 101 Main Street | 
| City   | Doomview  | 
| State  | NY    | 
| Zipcode  | 12312   | 
| Phone Number | (555) 555-1212 | 
+--------------+-----------------+

출처

2014-02-20 user1032531

를 사용합니다. 나는 <dl> 요소를 사용하기로 결정했습니다.

의미 상으로, 나는 <table>이 당신이하는 일을 잘 포착하지 못한다고 생각합니다. 테이블은 표 형식의 데이터에 사용해야하며, 필자에게 열 (= 속성)과 행 (= 엔터티)을 의미합니다. MDN에 따르면

HTML 요소 (또는 HTML 설명 목록 요소) 용어 및 설명 쌍의 목록을 둘러싼 다. 이 요소의 일반적인 용도는 용어집을 구현하거나 메타 데이터 (키 - 값 쌍 목록)를 표시하는 것입니다.

그러나이 상황에서는 본질적으로 키 = 값 목록, 즉 DL 인 엔티티 하나만있는 것처럼 보입니다.

나는 테이블로 DL 스타일링에 대한 예를 연결할 수 있습니다 : http://www.onextrapixel.com/2009/05/13/how-to-use-dl-dt-and-dd-html-tags-to-list-data-vs-table-list-data/
하고 결과를 : http://www.onextrapixel.com/examples/dl-tags-vs-table/

출처

2014-02-20 14:37:18 Bart

네,하지만 dl을 테이블과 동일한 스타일로 지정할 수 있습니까? 테두리 색, 배경색. 기타.? –

예, 링크 된 예를보세요 ... – Bart

네, 잠시 동안이 질문에 갇혀있었습니다. 나는 '

'이 더 의미 론적으로 정확하다는 것에 동의하지만, 요소가 비어 있다면 (더 많은 CSS가 필요하고 렌더링이 때로는 문제가된다. 나는 그것을 고치는데' '을 사용한다). 게시 한 좋은 링크. – user1032531

, 좀 더 의미 론적으로 올바른 다른, 더 접근성 이상으로 지속적으로 모든 비교적 현대적인 브라우저에서 렌더링 "더 나은"정의 Yes (예)를 가정합니다. 다른 방법보다 "더 나은"방법이 없습니다. 각 옵션이 "더 나을 수있는 유일한 방법은 각각이 사용되는 것입니다. http://www.w3schools.com/tags 귀하의 경우에는

, 두 개의 열이있는 테이블을 보이는 레이아웃을하고자하는 각 태그에 사용되는 것을

은의 좋은 목록을 보려면 여기를 참조하십시오. 이 경우 테이블 레이아웃을 원하기 때문에 다른 태그 대신 <table>을 사용합니다.

<table>

The <table> tag defines an HTML table.

의 <ul>

The <ul> tag defines an unordered (bulleted) list.

사용법의 <dl>

The <dl> tag defines a description list.

사용량의 사용

출처

2014-02-20 14:28:46

정의 목록은 좋은 선택처럼 보인다 - HTTP : //www.iandevlin.com/blog/2012/01/html/marking-up-a-postal-address-with-html 'Name'은 값과 연결되어 있습니다. –

감사 엘리트. 나는 테이블이 "오래된 유행"다는 것을 알고있다 그러나 잘 작동한다. 정의 된 목록은 "주소"가 "101 Main Street"의 정의이므로보다 의미 론적으로 정확합니다. 그러나 그 모두가 그렇게 중요합니까? – user1032531

당신이 원하는 레이아웃을 위해, 나는 당신이 요구하는 레이아웃에 따라 가장 논리적 인 선택이 될 것이라고 '

' 태그를 것입니다. @ user1032531 –

테이블 디자인은 웹 사이트를 디자인하는 오래된 방법이므로 실제로 테이블 스타일을 원할 때만 사용하십시오. 대신 div 디자인을 사용하십시오. 목록에는 ul과 li 요소가 들어 있습니다. 당신은 같은 것을 사용할 수 있습니다

<div id="left-col"> 
    <ul> 
     <li></li> 
     <li></li> 
    <ul> 
</div> 
<div id="right-col"> 
    <ul> 
     <li></li> 
     <li></li> 
    <ul> 
</div>

을하지만 테두리가있는 테이블을 원한다면 그때는 너무 잠시 동안이 질문에 붙어했던 <table> 태그

출처

2014-02-20 14:29:11 Fxxxx

예, 오래된 웹 사이트는 테이블로 설계되었지만 레이아웃 목적으로는 테이블이 완벽합니다. –

테이블 스타일 (테두리 등)을 원할 경우 테이블을 사용해야하지만 BUT 테이블은 웹 사이트의 구조를 디자인하는 데 사용해서는 안됩니다. 이것은 더 이상 사용되지 않습니다. – Fxxxx

예, 동의했습니다. 그러나 그의 질문은 실제로 그는 자신의 전체 사이트를 디자인하기 위해

을 사용하고 있다고 말하지 않습니다. –

HTML을 사용하여 여러 열 목록을 표시하는 가장 좋은 방법

답변

관련 문제