집 >웹 프론트엔드 >CSS 튜토리얼 >CSS에서 표 스타일을 설정하는 방법은 무엇입니까? (코드 예)

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

青灯夜游원래의: 2018-09-14 18:06:338645검색

이 장에서는 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에서 표 스타일을 설정하는 방법은 무엇입니까? (코드 예)

위 내용은 CSS에서 표 스타일을 설정하는 방법은 무엇입니까? (코드 예)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

css padding border table td th

성명：

이전 기사：CSS에서 !important를 사용하는 방법에 대한 자세한 그래픽 설명다음 기사：CSS에서 !important를 사용하는 방법에 대한 자세한 그래픽 설명