CSS에서 표 스타일을 설정하는 방법은 무엇입니까? (코드 예)-CSS 튜토리얼-php.cn

CSS에서 표 스타일을 설정하는 방법은 무엇입니까? (코드 예)

青灯夜游

풀어 주다： 2018-09-14 18:06:33

원래의

8608명이 탐색했습니다.

이 장에서는 CSS에서 표 스타일을 설정하는 방법을 소개합니다. (코드 예). 도움이 필요한 친구들이 참고할 수 있기를 바랍니다.

1. 테이블 테두리

border CSS 테이블 테두리를 지정하려면 border 속성을 사용하세요.

다음 예에서는 테이블의 Th 및 TD 요소에 검은색 테두리를 지정합니다.

table, th, td
{
border: 1px solid black;
}

로그인 후 복사

위 예에서 테이블에는 이중 테두리가 있습니다. 이는 테이블 요소와 th/td 요소가 별도의 경계를 갖기 때문입니다.

테이블의 단일 테두리를 표시하려면 border-collapse 속성을 사용하세요.

2. 테두리 축소

border-collapse 속성은 테이블의 테두리를 단일 테두리로 축소할지 아니면 분리할지를 설정합니다. #🎜 🎜#

table
{
border-collapse:collapse;
}
table,th, td
{
border: 1px solid black;
}

로그인 후 복사

3. 테이블 너비 및 높이

너비 및 높이 속성은 테이블의 너비와 높이를 정의합니다.

다음 예는 너비를 100%로 설정하고 요소의 높이를 50픽셀로 설정한 테이블입니다.

table {width:100%;}
th{height:50px;}

로그인 후 복사

4. 테이블 텍스트 정렬

테이블의 텍스트 정렬 및 세로 정렬 속성입니다.

text-align 속성은 왼쪽, 오른쪽, 가운데와 같은 가로 정렬을 설정합니다.

td{text-align:right;}

로그인 후 복사

vertical-align 세로 정렬 속성은 위쪽, 오른쪽, 가운데와 같은 세로 정렬을 설정합니다. 하단 또는 중앙 :

td{
height:50px;
vertical-align:bottom;
}

로그인 후 복사

5. 테이블 패딩

padding 테이블 내용에서 공백 사이의 경계를 제어하는 경우 td의 패딩 속성을 사용해야 합니다. 및 번째 요소:

td{padding:15px;}

로그인 후 복사

6. 테이블 색상

다음 예에서는 테두리 색상과 번째 요소의 텍스트 및 배경색을 지정합니다.

table, td, th { border:1px solid green; } 
th { background-color:green; color:white; }

로그인 후 복사

7. 예

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>CSS教程</title>
<style>
#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>Alfreds Futterkiste</td>
<td>Maria Anders</td>
<td>Germany</td>
</tr>
<tr class="alt">
<td>Berglunds snabbköp</td>
<td>Christina Berglund</td>
<td>Sweden</td>
</tr>
<tr>
<td>Centro comercial Moctezuma</td>
<td>Francisco Chang</td>
<td>Mexico</td>
</tr>
<tr class="alt">
<td>Ernst Handel</td>
<td>Roland Mendel</td>
<td>Austria</td>
</tr>
<tr>
<td>Island Trading</td>
<td>Helen Bennett</td>
<td>UK</td>
</tr>
<tr class="alt">
<td>Königlich Essen</td>
<td>Philip Cramer</td>
<td>Germany</td>
</tr>
<tr>
<td>Laughing Bacchus Winecellars</td>
<td>Yoshi Tannamuri</td>
<td>Canada</td>
</tr>
<tr class="alt">
<td>Magazzini Alimentari Riuniti</td>
<td>Giovanni Rovelli</td>
<td>Italy</td>
</tr>
<tr>
<td>North/South</td>
<td>Simon Crowther</td>
<td>UK</td>
</tr>
<tr class="alt">
<td>Paris spécialités</td>
<td>Marie Bertrand</td>
<td>France</td>
</tr>
</table>
</body>
</html>

로그인 후 복사

렌더링:

CSS에서 표 스타일을 설정하는 방법은 무엇입니까? (코드 예)