CSS 테이블

CSS 테이블과 양식은 웹페이지에서 가장 일반적인 요소입니다. 데이터를 표시하는 것 외에도 테이블은 레이아웃에도 자주 사용됩니다.

색상이 있는 테이블 테두리

위의 예는 테이블의 Th, TD 요소 및 th 요소의 텍스트와 텍스트를 지정합니다. 배경색 테두리:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php.cn</title>
<style type="text/css">
table.gridtable {
    font-family: verdana,arial,sans-serif;
    font-size:11px;
    color:#333333;
    border-width: 1px;
    border-color: #666666;
    border-collapse: collapse;
}
table.gridtable th {
    border-width: 1px;
    padding: 8px;
    border-style: solid;
    border-color: #666666;
    background-color: #dedede;
}
table.gridtable td {
    border-width: 1px;
    padding: 8px;
    border-style: solid;
    border-color: #666666;
    background-color: #ffffff;
}
</style>
</head>
<body>
<!-- Table goes in the document BODY -->
<table class="gridtable">
<tr>
    <th>Info Header 1</th><th>Info Header 2</th><th>Info Header 3</th>
</tr>
<tr>
    <td>Text 1A</td><td>Text 1B</td><td>Text 1C</td>
</tr>
<tr>
    <td>Text 2A</td><td>Text 2B</td><td>Text 2C</td>
</tr>
</table>
</body>
</html>

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

2 테이블 너비 및 높이

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

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title>
<style>
table,td,th
{
border:1px solid black;
}
table
{
width:50%;
}
th
{
height:50px;
}
</style>
</head>
<body>
<table>
<tr>
<th>汽车品牌</th>
<th>产地</th>
</tr>
<tr>
<td>马自达</td>
<td>日本</td>
</tr>
<tr>
<td>菲亚特</td>
<td>意大利</td>
</tr>
<tr>
<td>林肯</td>
<td>美国</td>
</tr>
</table>
</body>

3개 테이블 텍스트 정렬

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

수직 정렬 속성은 위쪽, 아래쪽 또는 가운데와 같은 수직 정렬을 설정합니다

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title>
<style>
table, td, th
{
border:1px solid black;
}
td
{
height:50px;
vertical-align:bottom;
}
</style>
</head>
<body>
<table>
<tr>
<th>汽车品牌</th>
<th>产地</th>
</tr>
<tr>
<td>马自达</td>
<td>日本</td>
</tr>
<tr>
<td>菲亚特</td>
<td>意大利</td>
</tr>
<tr>
<td>林肯</td>
<td>美国</td>
</tr>
</table>
</body>

지속적인 학습

새로운 파일

<html> <head> <meta charset="utf-8"> <title>php中文网(php.cn)</title> <style> table.imagetable { font-family: verdana,arial,sans-serif; font-size:11px; color:#333333; border-width: 1px; border-color: #999999; border-collapse: collapse; } table.imagetable th { background-color: #f0ffff; border-width: 1px; padding: 8px; border-style: solid; border-color: #999999; } table.imagetable td { background-color: #f0fff0; border-width: 1px; padding: 8px; border-style: solid; border-color: #999999; } </style> </head> <body> <table class="imagetable"> <tr> <th>Info Header 1</th><th>Info Header 2</th><th>Info Header 3</th> </tr> <tr> <td>Text 1A</td><td>Text 1B</td><td>Text 1C</td> </tr> <tr> <td>Text 2A</td><td>Text 2B</td><td>Text 2C</td> </tr> </table> </body> </html>

코드 재설정

자동운전

제출하다

시사 Clear