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

테이블 패딩

· 8년 전 · 2151

테이블 패딩

표의 테두리와 내용 사이의 간격을 제어하려면 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>



댓글 작성

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

로그인하기

게시글 목록

번호 제목
3133
3132
3131
3130
3129
3128
3127
3121
3120
3112
3111
3110
3109
3108
3107
3105
3104
3103
3101
3100
3099
3098
3097
3096
3094
3093
3092
3090
3089
3088