웹프로그래밍 CSS3/CSS3 속성

레이아웃 속성 3

별초롱언니 2025. 3. 13. 17:16

▣ table-layout 

· 셀 안 내용의 양에 따라 셀 너비를 조절 

속성값 설명
table-layout: auto; 내용 분량에 따라 셀 너비가 자동으로 조절된다. (기본값)
table-layout: fixed; 내용 분량과 관계없이 셀 너비를 고정한다
table-layout: initial; 변경된 테이블 레이아웃을 기본값 상태(auto)로 설정한다
table-layout:inherit; 부모 요소의 값을 상속 받아 셀 너비를 결정한다 
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    td, th {
      border: 1px solid black;
    }
    #tb1 {
      border: 2px solid red;
      table-layout: auto;
    }
    #tb2 {
      border: 3px dotted teal;
      background-color: yellow;
      table-layout: fixed
    }
  </style>
</head>
<body>
  <h2>table layout auto 예제</h2>
  <table id="tb1">
    <tr>
      <th>table layout auto</th>
      <td>내용 분량에 따라서 자동으로 조절</td>
    </tr>
  </table>
  <h2>table layout fixed 예제</h2>
  <table id="tb2" width="250px">
    <tr>
      <th>table layout fixed</th>
      <td>내용 분량과 상관 없이 고정</td>
    </tr>
  </table>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    td, th {
      border: 2px solid black;
    }
    #tb1 {
      border: 3px solid red;
      background-color: yellow;
      border-collapse: separate;
      table-layout: auto;
    }
    #tb2 {
      border: 3px solid red;
      background-color: yellow;
      border-collapse: collapse;
      table-layout: auto;
    }
  </style>
</head>
<body>
  <table id="tb1" width="350px">
    <tr>
      <th>table border-collapse</th>
      <td>separ ate 적용</td>
    </tr>
  </table> 

  <p></p>

  <table id="tb2" width="350px">
    <tr>
      <th>table border-collapse</th>
      <td>collapse 적용</td>
    </tr>
  </table> 
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    td, th {
      border: 1px solid black;
    }
    #tb1 {
      border: 2px solid green;
      border-spacing: 10px;
    }
    #tb2 {
      border: 2px solid green;
      background-color: lightblue;
      border-spacing: 20px 40px;
    }
  </style>
</head>
<body>
  <table id="tb1" width="350px">
    <tr>
      <th>table border-spacing</th>
      <td>10px</td>
    </tr>
  </table>

  <table id="tb2" width="350px">
    <tr>
      <th>table border-spacing</th>
      <td>20px 40px</td>
    </tr>
  </table>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    table {
      border: 1px solid black;
      width: 300px;
    }
    td, th {
      border: 1px solid red;
    }
    #tb1 {
      border-collapse: separate;
      empty-cells: hide;
    }
    #tb2 {
      border-collapse: separate;
      empty-cells: show;
    }
  </style>
</head>
<body>
  <table id="tb1">
    <tr>
      <td>국어</td>
      <td>영어</td>
      <td></td>
    </tr>
    <tr>
      <td>수학</td>
      <td></td>
    </tr>
  </table>
  <p></p>
  <table id="tb2">
    <tr>
      <td>국어</td>
      <td>영어</td>
      <td></td>
    </tr>
    <tr>
      <td>수학</td>
      <td></td>
    </tr>
  </table>
</body>
</html>