테이블 패딩

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