CSS를 사용하여 모서리가 둥근 HTML 표 만들기

Naila Saad Siddiqui 2023년6월20일

CSS CSS Table

이 간단한 프로그래밍 가이드는 HTML 페이지에서 둥근 모서리 테이블을 만들기 위한 CSS 스타일에 관한 것입니다.

CSS를 사용하여 모서리가 둥근 HTML 표 만들기

이미지, 테이블 또는 div 세그먼트의 모서리를 둥글게 만드는 속성은 border-radius입니다. 이 속성은 테이블과 같은 HTML 요소의 모서리 반경을 설정합니다.

아래 예를 살펴보겠습니다.

table {
  border-collapse: separate;
  border-spacing: 0;
  min-width: 350px;
}
table tr th,
table tr td {
  border-right: 1px solid #bbb;
  border-bottom: 1px solid #bbb;
  padding: 5px;
}
table tr th:first-child,
table tr td:first-child {
  border-left: 1px solid #bbb;
}
table tr th {
  background: #eee;
  border-top: 1px solid #bbb;
  text-align: left;
}

/* top-left border-radius */
table tr:first-child th:first-child {
  border-top-left-radius: 6px;
}

/* top-right border-radius */
table tr:first-child th:last-child {
  border-top-right-radius: 6px;
}

/* bottom-left border-radius */
table tr:last-child td:first-child {
  border-bottom-left-radius: 6px;
}

/* bottom-right border-radius */
table tr:last-child td:last-child {
  border-bottom-right-radius: 6px;
}

이 CSS 스타일링에서는 테이블 td, th, table 등의 다른 구성 요소에 다른 스타일을 적용했습니다.

적용한 첫 번째 스타일은 단색 검정색 1px의 테두리 속성이며 테두리 반경 10px를 적용했습니다. 이 속성은 테이블의 모든 테두리를 둥근 모양으로 만듭니다.

그런 다음 1px 크기의 검정색으로 모든 셀에 테두리를 적용했습니다. HTML 코드는 다음과 같습니다.

<body>
<table>
    <thead>
    <tr>
        <th>Table </th>
        <th>Header</th>
        <th>Row</th>
    </tr>
    </thead>
    <tr>
        <td>sample</td>
        <td>text</td>
        <td>sample</td>
    </tr>
    <tr>
        <td>text</td>
        <td>sample</td>
        <td>text</td>
    </tr>
</table>
</body>

이 테이블에는 헤더 행과 샘플 데이터용 행 두 개가 있습니다.

둥근 모서리의 수는 제공된 크기에 따라 다릅니다. 따라서 HTML 테이블의 둥근 모서리를 만드는 방법을 알 수 있습니다.