실행 가능한 HTML 문서: 표 테두리

Q: HTML에서 표에 테두리를 넣으려면 어떻게 하나요?

표와 셀에 CSS를 쓰세요. table { border-collapse: collapse; } th, td { border: 1px solid #999; }처럼요. 셀의 테두리가 격자를 그리고, border-collapse: collapse가 이웃한 테두리를 한 줄로 합쳐요.

Q: 표 테두리가 왜 두 줄로 나오나요?

기본적으로 각 셀이 자기 테두리를 그리고 셀 사이에 틈이 있어서(border-collapse: separate), 이웃한 셀에 선이 두 개 보여요. 에 border-collapse: collapse를 주면 한 줄로 합쳐져요.

Q: 표 모서리를 둥글게 하려면 어떻게 하나요?

border-collapse: collapse인 표에서는 border-radius가 효과가 없어요. border-collapse: separate와 border-spacing: 0을 쓰고, 표에 radius를 주고, 모서리 셀에도 같은 radius(border-start-start-radius 등)를 줘서 셀 배경이 모서리 밖으로 삐져나오지 않게 하세요.

Q: 표의 테두리를 없애려면 어떻게 하나요?

표는 무언가가 추가하지 않는 한 테두리가 없어요. 태그에서 border 속성을 지우거나, 테두리를 추가하는 스타일시트를 덮어쓰도록 table, th, td에 border: none을 주세요.

표에 테두리 넣는 법

표에는 기본적으로 테두리가 없어요. CSS로 추가하세요. 모든 셀에 준 border가 격자를 그리고, 표에 준 border-collapse: collapse가 이웃한 테두리 두 개를 한 줄로 합쳐요.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Table border</title>
  <style>
    table { border-collapse: collapse; }
    th, td { border: 1px solid #6b7280; padding: 6px 12px; }
  </style>
</head>
<body>
  <table>
    <tr><th>Size</th><th>Price</th></tr>
    <tr><td>Small</td><td>3.00</td></tr>
    <tr><td>Large</td><td>4.50</td></tr>
  </table>
</body>
</html>

border 단축 속성은 두께, 스타일, 색을 순서와 상관없이 받아요. 1px solid #6b7280처럼요. table에만 주지 말고 th, td에 주세요. 표에 준 테두리는 바깥 틀만 그려요.

border-collapse: separate와 collapse

border-collapse는 셀이 테두리를 공유할지 정해요.

값	결과
`separate`(기본값)	셀마다 자기 테두리가 있고, 셀 사이 틈은 `border-spacing`으로 정함
`collapse`	이웃한 셀이 테두리 하나를 공유함. `border-spacing`은 무시됨

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>border-collapse</title>
  <style>
    body { display: flex; flex-wrap: wrap; gap: 24px; font-family: system-ui, sans-serif; }
    table { border: 2px solid #2563eb; }
    th, td { border: 2px solid #f59e0b; padding: 6px 10px; }
    .separate { border-collapse: separate; border-spacing: 6px; }
    .collapse { border-collapse: collapse; }
  </style>
</head>
<body>
  <table class="separate">
    <caption>separate</caption>
    <tr><td>A</td><td>B</td></tr>
    <tr><td>C</td><td>D</td></tr>
  </table>
  <table class="collapse">
    <caption>collapse</caption>
    <tr><td>A</td><td>B</td></tr>
    <tr><td>C</td><td>D</td></tr>
  </table>
</body>
</html>

separate 표에서는 두 겹이 모두 보여요. 파란 표 테두리와 셀마다 따로 있는 주황색 상자, 그리고 그 사이의 border-spacing이에요. 6px를 0으로 바꾸면 셀이 맞닿지만 선은 여전히 두 줄이에요. 선을 합치는 건 collapse뿐이에요.

합쳐진 두 테두리가 만나는데 서로 다르면, 더 두꺼운 쪽이 이겨요. 두께가 같으면 스타일이 결정하고(double이 solid를, solid가 dashed와 dotted를 이겨요), 그것도 같으면 셀 테두리가 행 테두리를, 행 테두리가 표 테두리를 이겨요. 그래서 collapse 표의 바깥 가장자리가 파란색이 아니라 주황색이에요. 거기서 셀과 표 모두 2px solid 테두리를 가지고 있고, 셀이 이기거든요.

가로선만, 또는 안쪽 선만

요즘 표는 대부분 모든 선을 그리지 않아요. 흔한 패턴 두 가지예요.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Border patterns</title>
  <style>
    body { display: flex; flex-wrap: wrap; gap: 32px; font-family: system-ui, sans-serif; }
    table { border-collapse: collapse; }
    th, td { padding: 6px 12px; text-align: start; }

    /* 1. Row lines only */
    .rows th, .rows td { border-bottom: 1px solid #d1d5db; }
    .rows thead th { border-bottom: 2px solid #111827; }

    /* 2. Inner grid, no outer frame */
    .inner th, .inner td { border: 1px solid #d1d5db; }
    .inner tr:first-child th, .inner tr:first-child td { border-top: 0; }
    .inner tr:last-child th, .inner tr:last-child td { border-bottom: 0; }
    .inner th:first-child, .inner td:first-child { border-inline-start: 0; }
    .inner th:last-child, .inner td:last-child { border-inline-end: 0; }
  </style>
</head>
<body>
  <table class="rows">
    <thead><tr><th>Name</th><th>Score</th></tr></thead>
    <tbody>
      <tr><td>Ana</td><td>92</td></tr>
      <tr><td>Bob</td><td>87</td></tr>
    </tbody>
  </table>

  <table class="inner">
    <tr><td>1</td><td>2</td><td>3</td></tr>
    <tr><td>4</td><td>5</td><td>6</td></tr>
    <tr><td>7</td><td>8</td><td>9</td></tr>
  </table>
</body>
</html>

두 번째 표는 가장자리 셀의 바깥쪽 테두리를 없애요. border-inline-start와 border-inline-end는 행의 시작과 끝을 뜻하기 때문에, 첫 번째 셀이 반대쪽에 있는 오른쪽에서 왼쪽으로 쓰는 언어에서도 같은 CSS가 올바르게 동작해요.

둥근 표 모서리

border-collapse: collapse인 표에서는 border-radius가 아무 효과도 없어요. 둥근 표는 간격 없는 separate 모델을 쓰고, 셀에 아래쪽과 끝쪽 테두리만 줘서 선을 한 번씩만 그려요.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Rounded table</title>
  <style>
    table {
      border-collapse: separate;
      border-spacing: 0;
      border: 1px solid #9ca3af;
      border-radius: 10px;
      font-family: system-ui, sans-serif;
    }
    th, td {
      padding: 8px 14px;
      border-bottom: 1px solid #9ca3af;
      border-inline-end: 1px solid #9ca3af;
    }
    th { background: #e5e7eb; }
    tr:first-child > :first-child { border-start-start-radius: 9px; }
    tr:first-child > :last-child { border-start-end-radius: 9px; }
    tr > :last-child { border-inline-end: 0; }
    tr:last-child > * { border-bottom: 0; }
  </style>
</head>
<body>
  <table>
    <tr><th>Plan</th><th>Price</th></tr>
    <tr><td>Free</td><td>0</td></tr>
    <tr><td>Pro</td><td>12</td></tr>
  </table>
</body>
</html>

머리 행의 모서리 셀 두 개에는 회색 배경이 곡선을 따라가도록 따로 radius를 줘요. 이게 없으면 셀의 네모난 모서리가 둥근 테두리 밖으로 삐져나와요. radius는 9px로, 표의 10px에서 테두리 1px을 뺀 값이라 두 곡선이 딱 맞아요.

부분별 테두리 색과 두께

표의 부분마다 테두리를 다르게 할 수 있어요. thead, tfoot, 개별 행에 대한 선택자로 머리 행 아래나 합계 위에 더 굵은 선을 넣어요.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Border per part</title>
  <style>
    table { border-collapse: collapse; font-family: system-ui, sans-serif; }
    th, td { padding: 6px 14px; border: 1px solid #e5e7eb; text-align: start; }
    thead th { border-bottom: 3px solid #2563eb; }
    tfoot td { border-top: 3px double #111827; font-weight: bold; }
  </style>
</head>
<body>
  <table>
    <thead><tr><th>Month</th><th>Sales</th></tr></thead>
    <tbody>
      <tr><td>July</td><td>120</td></tr>
      <tr><td>August</td><td>135</td></tr>
    </tbody>
    <tfoot><tr><td>Total</td><td>255</td></tr></tfoot>
  </table>
</body>
</html>

두 선이 만나는 곳에서는 위의 collapse 규칙에 따라 3px 선이 1px 회색 선을 이겨요. 표의 나머지 구조(thead, tfoot, th)는 HTML table을 보세요.

border 속성

오래된 튜토리얼은 <table> 태그에 속성을 써요.

<table border="1" cellspacing="0" cellpadding="6">

브라우저는 여전히 border="1"을 따라요. separate 모델로 표와 모든 셀에 테두리를 그려서 두 줄처럼 보여요. 세 속성 모두 HTML5에서는 더 이상 쓰지 않아요. CSS로는 셀에 border, 표에 border-spacing(또는 border-collapse: collapse), 셀에 padding을 쓰면 같아요.

자주 하는 실수

table에만 테두리를 줌. 안쪽 선 없이 틀만 생겨요. th, td에 테두리를 추가하세요.
border-collapse: collapse를 빼먹음. 선이 두 줄로 보여요.
border-collapse: collapse와 함께 border-radius를 씀. radius가 무시돼요.
border-collapse: collapse와 함께 border-spacing을 씀. 간격은 separate 모델에서만 동작해요.
separate 모델에서 <tr>에 테두리를 줌. 표가 collapse가 아니면 행은 테두리를 그리지 않아요. 대신 셀을 꾸미세요.
새 코드에서 border="1"을 씀. 아직 동작하지만 색을 정할 수 없고 더 이상 쓰지 않는 속성이에요.

자주 묻는 질문

HTML에서 표에 테두리를 넣으려면 어떻게 하나요?

표와 셀에 CSS를 쓰세요. table { border-collapse: collapse; } th, td { border: 1px solid #999; }처럼요. 셀의 테두리가 격자를 그리고, border-collapse: collapse가 이웃한 테두리를 한 줄로 합쳐요.

표 테두리가 왜 두 줄로 나오나요?

기본적으로 각 셀이 자기 테두리를 그리고 셀 사이에 틈이 있어서(border-collapse: separate), 이웃한 셀에 선이 두 개 보여요. <table>에 border-collapse: collapse를 주면 한 줄로 합쳐져요.

table의 border 속성을 아직 써도 되나요?

<table border="1">은 모든 브라우저에서 여전히 테두리를 그리지만, HTML5에서는 더 이상 쓰지 않는 속성이고 색이나 스타일을 조절할 수 없어요. 대신 CSS border 속성을 쓰세요.

표 모서리를 둥글게 하려면 어떻게 하나요?

border-collapse: collapse인 표에서는 border-radius가 효과가 없어요. border-collapse: separate와 border-spacing: 0을 쓰고, 표에 radius를 주고, 모서리 셀에도 같은 radius(border-start-start-radius 등)를 줘서 셀 배경이 모서리 밖으로 삐져나오지 않게 하세요.

표의 테두리를 없애려면 어떻게 하나요?

표는 무언가가 추가하지 않는 한 테두리가 없어요. <table> 태그에서 border 속성을 지우거나, 테두리를 추가하는 스타일시트를 덮어쓰도록 table, th, td에 border: none을 주세요.