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

테이블 패딩

· 8년 전 · 2147

테이블 패딩

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



댓글 작성

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

로그인하기

게시글 목록

번호 제목
2982
2981
2980
2979
2978
2977
2976
2975
2974
2973
2972
2971
2970
2969
2968
2967
2966
2965
2964
2963
2962
2961
2960
2959
2958
2957
2956
2955
2954
2953