테이블 list_HTML/Xhtml_웹페이지 제작을 포기하려면 표준 dl, dt, dd 태그를 사용하세요.

이제 점점 더 많은 프런트 엔드 개발자가 xHTML CSS를 사용하여 원래 테이블 레이아웃을 대체하여 웹 페이지의 전체 레이아웃을 완성하기 시작했습니다. 이는 웹 사이트의 개발 및 유지 관리 비용을 줄일 뿐만 아니라 코드를 더 많이 만듭니다. 의미론적. 그러나 이것이 그 이후로 테이블이 사라진 것은 아니며, 개인정보 데이터 목록 등 웹페이지에서의 데이터 표현을 위한 필수품으로 여전히 많은 사람들이 사용하고 있습니다. 실제로 HTML의 dl, dt 및 dd 태그를 사용하면 더 많은 코드가 절약되고 코드가 내용과 의미상 더 일치하게 됩니다. 물론 테이블도 그 자리를 차지합니다. 즉, 많은 양의 데이터가 포함된 데이터 테이블이지만 작은 데이터 목록과 양식에서는 테이블을 전혀 사용할 필요가 없습니다!
아직 기존 테이블을 사용하여 데이터 목록을 생성하고 있다면 HTML의 dl, dt 및 dd 태그를 사용하여 작업을 어떻게 더 쉽게 만들 수 있는지 계속 읽어보세요...
테이블 데이터 목록
데이터 기존 테이블의 목록 코드는 다음과 같습니다. 각 행에 tr 태그를 추가한 다음 제목과 데이터에 td 태그를 추가해야 합니다. 태그는 모두 td이므로 스타일을 추가하려면 각 td에 class 속성을 추가해야 합니다.

코드 복사

코드는 다음과 같습니다.

>


;




>남성

class=" text">1986년 5월 26일



다음은 해당 CSS 코드를 사용하여 이전에 HTML에서 선언한 클래스에 스타일을 추가합니다.




코드 복사


코드는 다음과 같습니다.

/*TABLE LIST DATA* / 테이블 { 여백-하단:50px; }

테이블 tr .title {

배경:#5f9be3

색상:#fff
글꼴 무게: 굵게;
padding:5px;
너비:100px;
}
table tr .text {
padding-left:10px; 위의 코드에서 table 태그를 사용하면 CSS를 사용하여 콘텐츠를 수정하거나 수정하려면 해당 클래스 속성을 td 셀에 추가해야 한다는 것을 알 수 있습니다. 이렇게 하면 사실상 작업량이 증가하고 코드가 약간 더 커집니다. 코드가 많다는 것은 무엇을 의미하나요? 이는 웹사이트 트래픽이 낭비되고, 버그가 발생할 확률이 높아지며, 추후 유지 관리가 더 어려워진다는 것을 의미합니다.
dl, dt, dd 데이터 목록
이제 HTML dl, dt, dd 태그를 사용하여 데이터 목록을 살펴보겠습니다. 먼저 전체 데이터 구조를 수용하기 위해 dl(definition list-custom list) 태그를 사용한 다음, 데이터의 제목과 내용을 수용하기 위해 dt(custom title) 태그와 dd(custom Description) 태그를 사용합니다.





코드 복사

코드는 다음과 같습니다.

>

이름:

Squall Li

나이:

23

;

성별:

남성

생일:

1986년 5월 26일< ;/dd>

CSS 코드에서는 dt와 dd를 왼쪽으로 이동시키기만 하면 됩니다.





코드 복사


코드는 다음과 같습니다.

/*DL, DT, DD 태그 목록 데이터*/
dl {
margin-bottom:50px;

}

dl dt { color:#fff float; :왼쪽; 글꼴-가중치:굵게; 여백: 5px;

폭: 100px;

dl dd {

2px 0;
padding:5px 0;
}


dl, dt, dd의 예를 보면 코드가 더 간단하고 매끄러우며 그리고 더 의미론적이죠?
이를 보면, 여전히 웹 양식이나 기타 웹 페이지 레이아웃을 완성하기 위해 테이블 ​​태그를 사용하려고 한다면 이제 코드를 변경할 때입니다. 작업을 더 쉽게 만드세요!

이름:	스콜 리
나이:	;/td>
성별:
생년월일: