CSS 테이블
테이블 연구에서는 주로 다음 속성을 이해합니다.
border-collapse --- 테이블 테두리를 단일 테두리로 병합할지 여부를 설정합니다.
border-spacing ---셀 테두리를 구분하는 거리를 설정합니다.
caption-side --- 표 제목의 위치를 설정합니다.
empty-cells --- 테이블에 빈 셀을 표시할지 여부를 설정합니다.
table-layout ---셀, 행, 열 표시 알고리즘을 설정합니다.
여기에서는 가장 일반적으로 사용되는 속성만 사용합니다. 먼저 테이블을 만들고 다음 콘텐츠를 추가합니다.
<table id="tb"> <tr> <th>name</th> <th>age</th> <th>number</th> </tr> <tr> <td>li</td> <td>3</td> <td>4</td> </tr> <tr class="tr2"> <td>li</td> <td>3</td> <td>4</td> </tr> <tr> <td>li</td> <td>3</td> <td>4</td> </tr> <tr class="tr2"> <td>li</td> <td>3</td> <td>4</td> </tr> </table>
물론 경계 없는 효과입니다. 아래에서는 테두리를 추가하고 CSS에서 색상(외부 테두리 및 내부 테두리)을 지정합니다.
#tb,tr,th,td{ border: 1px solid green; }
보시다시피 효과는 다음과 같습니다.
이것이 기본 속성입니다. 이제 CSS를 통해 목록을 맞춤설정하겠습니다. 먼저 border-collapse를 사용하여 전체 목록 테두리를 한 줄로 병합한 다음 너비와 높이를 사용하여 테이블 크기를 사용자 정의한 다음 background-color를 사용하여 배경색을 추가하고 text-align을 사용하여 문자 정렬을 설정합니다. 내부 테두리를 설정하기 위한 패딩입니다. 🎜>