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;
}

보시다시피 효과는 다음과 같습니다.

QQ截图20161011152624.png


이것이 기본 속성입니다. 이제 CSS를 통해 목록을 맞춤설정하겠습니다. 먼저 border-collapse를 사용하여 전체 목록 테두리를 한 줄로 병합한 다음 너비와 높이를 사용하여 테이블 크기를 사용자 정의한 다음 background-color를 사용하여 배경색을 추가하고 text-align을 사용하여 문자 정렬을 설정합니다. 내부 테두리를 설정하기 위한 패딩입니다. 🎜>

지속적인 학습
||
<html> <head> <style type="text/css"> #customers { font-family:"Trebuchet MS", Arial, Helvetica, sans-serif; width:100%; border-collapse:collapse; } #customers td, #customers th { font-size:1em; border:1px solid #98bf21; padding:3px 7px 2px 7px; } #customers th { font-size:1.1em; text-align:left; padding-top:5px; padding-bottom:4px; background-color:#A7C942; color:#ffffff; } #customers tr.alt td { color:#000000; background-color:#EAF2D3; } </style> </head> <body> <table id="customers"> <tr> <th>Company</th> <th>Contact</th> <th>Country</th> </tr> <tr> <td>Apple</td> <td>Steven Jobs</td> <td>USA</td> </tr> <tr class="alt"> <td>Baidu</td> <td>Li YanHong</td> <td>China</td> </tr> <tr> <td>Google</td> <td>Larry Page</td> <td>USA</td> </tr> <tr class="alt"> <td>Lenovo</td> <td>Liu Chuanzhi</td> <td>China</td> </tr> <tr> <td>Microsoft</td> <td>Bill Gates</td> <td>USA</td> </tr> <tr class="alt"> <td>Nokia</td> <td>Stephen Elop</td> <td>Finland</td> </tr> </table> </body> </html>
  • 코스 추천
  • 코스웨어 다운로드
현재 코스웨어를 다운로드할 수 없습니다. 현재 직원들이 정리하고 있습니다. 앞으로도 본 강좌에 많은 관심 부탁드립니다~