테스트 사이트 - 개발 중인 베타 버전입니다

테이블 패딩

· 8년 전 · 2148

테이블 패딩

표의 테두리와 내용 사이의 간격을 제어하려면 padding<td> 및 <th> 요소 의 속성을 사용하십시오 .

 

 

th, td {

    padding: 15px;

    text-align: left;

}

 

 

<!DOCTYPE html>

<html>

<head>

<style>

table, td, th {    

    border: 1px solid #ddd;

    text-align: left;

}

 

table {

    border-collapse: collapse;

    width: 100%;

}

 

th, td {

    padding: 15px;

}

</style>

</head>

<body>

 

<h2>The padding Property</h2>

<p>This property adds space between the border and the content in a table.</p>

 

<table>

  <tr>

    <th>Firstname</th>

    <th>Lastname</th>

    <th>Savings</th>

  </tr>

  <tr>

    <td>Peter</td>

    <td>Griffin</td>

    <td>$100</td>

  </tr>

  <tr>

    <td>Lois</td>

    <td>Griffin</td>

    <td>$150</td>

  </tr>

  <tr>

    <td>Joe</td>

    <td>Swanson</td>

    <td>$300</td>

  </tr>

  <tr>

    <td>Cleveland</td>

    <td>Brown</td>

    <td>$250</td>

  </tr>

</table>

 

</body>

</html>



댓글 작성

댓글을 작성하시려면 로그인이 필요합니다.

로그인하기

게시글 목록

번호 제목
3056
3055
3054
3051
3050
3049
3046
3045
3044
3043
3042
3041
3040
3039
3038
3034
3033
3032
3027
3026
3025
3024
3023
3022
3021
3020
3019
3018
3017
3016