CSS 테이블
CSS를 사용하면 HTML 테이블의 모양을 크게 향상시킬 수 있습니다.
CSS 테이블 속성
CSS 테이블 속성은 테이블의 모양을 크게 개선하는 데 도움이 됩니다.
테이블 테두리
CSS에서 테이블 테두리를 설정하려면 테두리 속성을 사용하세요.
다음 예에서는 테이블 th 및 td에 파란색 테두리를 설정합니다.
table, th, td
{
border: 1px Solid Blue ;
}
위 예의 표에는 이중선 테두리가 있습니다. 이는 table, th 및 td 요소가 독립적인 테두리를 갖기 때문입니다.
표를 한 줄의 테두리로 표시하려면 border-collapse 속성을 사용하세요.
테두리 접기
border-collapse 속성은 테이블의 테두리를 단일 테두리로 접을지 아니면 분리할지 설정합니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
table {
border-collapse: collapse;
}
table, td, th {
border: 1px solid black;
}
</style>
</head>
<body>
<table>
<tr>
<th>Firstname</th>
<th>Lastname</th>
</tr>
<tr>
<td>Peter</td>
<td>Griffin</td>
</tr>
<tr>
<td>Lois</td>
<td>Griffin</td>
</tr>
</table>
<p><b>注意；</b> 如果没有指定 !DOCTYPE border-collapse 属性在 IE8 及更早 IE 版本中是不起作用的。</p>
</body>
</html>테이블 너비 및 높이
Width 및 height 속성은 테이블의 너비와 높이를 정의합니다.
다음 예는 너비를 100%로 설정하고 요소의 높이를 50픽셀로 설정한 표입니다.
table
{
width:100%;
}
th
{
height:50px;
}표 텍스트 정렬
테이블의 텍스트 정렬 및 세로 정렬 속성입니다.
text-align属性设置水平对齐方式，像左，右，或中心：
td{text-align:right;}세로 정렬 속성은 위쪽, 아래쪽 또는 중간과 같은 수직 정렬을 설정합니다.
td
{
height:50px;
vertical-align:bottom;
}테이블 채우기
If in 테이블 내용에서 공백 사이의 경계를 제어하려면 td 및 th 요소의 패딩 속성을 사용해야 합니다.
td
{
padding:15px;
}테이블 색상
다음 예에서는 테두리 색상과 번째 요소의 텍스트 및 배경 색상을 지정합니다
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
<style>
table, td, th
{
border:1px solid blue;
}
th
{
background-color:pink;
color:white;
}
</style>
</head>
<body>
<table>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Savings</th>
</tr>
<tr>
<td>Peter</td>
<td>Griffin</td>
<td>0</td>
</tr>
<tr>
<td>Lois</td>
<td>Griffin</td>
<td>0</td>
</tr>
<tr>
<td>Joe</td>
<td>Swanson</td>
<td>0</td>
</tr>
<tr>
<td>Cleveland</td>
<td>Brown</td>
<td>0</td>
</tr>
</table>
</body>
</html>
다음 섹션