CSS로 테이블 스타일을 설정하는 방법은 무엇입니까? CSS로 테이블 스타일을 설정하는 방법-CSS 튜토리얼-php.cn

CSS로 테이블 스타일을 설정하는 방법은 무엇입니까? CSS로 테이블 스타일을 설정하는 방법

不言

풀어 주다： 2018-08-18 14:16:10

원래의

5552명이 탐색했습니다.

간단한 표가 때로는 단조롭게 느껴질 때도 있는데 CSS 표에 스타일을 추가하려면 어떻게 해야 할까요? 이 글에서는 CSS 테이블 스타일을 설정하는 방법을 소개합니다.

1. 간단한 테이블
table.html

<!doctype html><html><head>
    <meta charset="utf-8">
    <title>表格样式</title>
    <link href="box.css" type="text/css" rel="stylesheet"></head><body>
  <center>
  <table class="class">
      <caption>课程表</caption>
        <tr>
            <th>星期\课程</th>
            <th>星期一</th>
            <th>星期二</th>
            <th>星期三</th>
            <th>星期四</th>
            <th>星期五</th>
      </tr>
      <tr>
            <th>1-2节</th>
            <td>数学</td>
            <td>语文</td>
            <td>化学</td>
            <td>英语</td>
             <td>英语</td>
      </tr>

      <tr>
            <th>3-4节</th>
            <td>英语</td>
            <td>物理</td>
            <td>化学</td>
            <td>英语</td>
             <td>体育</td>
      </tr>

      <tr>
            <th>5-6节</th>
            <td>数学</td>
            <td>物理</td>
            <td>体育</td>
            <td>化学</td>
            <td>美术</td>
      </tr>

      <tr>
            <th>7-8节</th>
            <td>数学</td>
            <td>美术</td>
            <td>化学</td>
            <td>英语</td>
            <td>体育</td>
      </tr>
      <tr>
            <th>9-10节</th>
            <td>生物</td>
            <td>美术</td>
            <td>生物</td>
            <td>英语</td>
            <td>物理</td>
      </tr>
    </table>
  </center>
  </body></html>

로그인 후 복사

2. 테두리 병합: boder-collapse

속성 값: separate; (별도, 기본값) )

table.css

table,td,th{
    border:1px solid #aaa;    
    font-size: 23px;
    }

로그인 후 복사

3. 테두리 간격(전제: border-collapse:separate;)

table.css

table,td,th{
    border:1px solid #aaa;    
    font-size: 23px;    
    border-collapse:collapse;
    }

로그인 후 복사

4 테이블 제목 캡션 쪽

속성의 위치를 설정합니다. 값: 상단;//기본값
하단; 왼쪽
맞습니다. bTable.css

table,td,th{
    border:1px solid #aaa;    
    font-size: 23px;    
    border-collapse:separate;    
    border-spacing: 45px;
    }

로그인 후 복사

5, 셀 개체의 너비가 셀에 정의된 너비를 초과하는 경우 Table-Layout:Fix를 사용하여 테이블의 너비를 유지할 수 있습니다. 고정(고정 너비)

table.css

table,td,th{
    border:1px solid #aaa;    
    font-size: 23px;    
    border-collapse:separate;    
    border-spacing: 45px;    
    caption-side:bottom;
    }

로그인 후 복사