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을 사용하여 문자 정렬을 설정합니다. 내부 테두리를 설정하기 위한 패딩입니다. 🎜>