HTML 테이블에는 다양한 스타일과 모양의 테두리가 있을 수 있다.
테이블 테두리 추가
테두리를 추가하려면 table, th 및 td 요소의 CSS 테두리 속성을 사용한다:
| <!DOCTYPE html> <html> <head> <style> table, th, td { border: 1px solid black; } </style> </head> <body> <h2>테이블 테두리</h2> <p>CSS 테두리 속성을 사용하여 테이블에 테두리 추가.</p> <table style="width:100%"> <tr> <th>이름</th> <th>성</th> <th>나이</th> </tr> <tr> <td>길동</td> <td>홍</td> <td>50</td> </tr> <tr> <td>영희</td> <td>이</td> <td>94</td> </tr> <tr> <td>철수</td> <td>김</td> <td>80</td> </tr> </table> </body> </html> |
접힌 테이블 테두리(Collapsed Table Borders)
위의 예와 같이 이중 테두리를 갖지 않으려면 CSS border-collapse 속성을 collapse 로 설정한다.
이렇게 하면 경계가 단일 테두리로 축소된다:
| <!DOCTYPE html> <html> <head> <style> table, th, td { border: 1px solid black; border-collapse: collapse; } </style> </head> <body> <h2>접힌 테이블 테두리</h2> <p>경계를 하나의 경계로 접으려면 CSS 경계 접기 속성을 추가합니다 <tr> <th>이름</th> <th>성</th> <th>나이</th> </tr> <tr> <td>길동</td> <td>홍</td> <td>50</td> </tr> <tr> <td>영희</td> <td>이</td> <td>94</td> </tr> <tr> <td>철수</td> <td>김</td> <td>80</td> </tr>.</p> <table style="width:100%"> <tr> <th>Firstname</th> <th>Lastname</th> <th>Age</th> </tr> <tr> <td>Jill</td> <td>Smith</td> <td>50</td> </tr> <tr> <td>Eve</td> <td>Jackson</td> <td>94</td> </tr> <tr> <td>John</td> <td>Doe</td> <td>80</td> </tr> </table> </body> </html> |
테이블 테두리 스타일
각 셀의 배경색을 설정하고 테두리를 흰색(문서 배경과 동일)으로 지정하면 보이지 않는 테두리와 같은 느낌을 받을 수 있다:
| <!DOCTYPE html> <html> <head> <style> table, th, td { border: 1px solid white; border-collapse: collapse; } th, td { background-color: #96D4D4; } </style> </head> <body> <h2>보이지 않는 테두리 테이블</h2> <p>흰색 테두리와 셀 배경색으로 테이블에 스타일을 지정하여 보이지 않는 테두리의 인상을 만듭니다.</p> <table style="width:100%"> <tr> <th>이름</th> <th>성</th> <th>나이</th> </tr> <tr> <td>길동</td> <td>홍</td> <td>50</td> </tr> <tr> <td>영희</td> <td>이</td> <td>94</td> </tr> <tr> <td>철수</td> <td>김</td> <td>80</td> </tr> </table> </body> </html> |
둥근 테두리 테이블
border-radius 특성을 사용하면 테두리가 둥근 모서리가 된다:
| <!DOCTYPE html> <html> <head> <style> table, th, td { border: 1px solid black; border-radius: 10px; } </style> </head> <body> <h2>둥근 테두리가 있는 테이블</h2> <p>CSS 테두리 반지름 속성을 사용하여 테두리에 둥근 모서리를 추가합니다.</p> <table style="width:100%"> <tr> <th>이름</th> <th>성</th> <th>나이</th> </tr> <tr> <td>길동</td> <td>홍</td> <td>50</td> </tr> <tr> <td>영희</td> <td>이</td> <td>94</td> </tr> <tr> <td>철수</td> <td>김</td> <td>80</td> </tr> </table> </body> </html> |
점선 테이블 테두리
border-style 속성을 사용하여 테두리 모양을 설정할 수 있습니다.
border-sytle은 아래 그림과 같다.
| <!DOCTYPE html> <html> <head> <style> table, th, td { border-style: dotted; } </style> </head> <body> <h2>둥근 테두리가 있는 테이블</h2> <p>CSS 테두리 반지름 속성을 사용하여 테두리에 둥근 모서리를 추가합니다.</p> <table style="width:100%"> <tr> <th>이름</th> <th>성</th> <th>나이</th> </tr> <tr> <td>길동</td> <td>홍</td> <td>50</td> </tr> <tr> <td>영희</td> <td>이</td> <td>94</td> </tr> <tr> <td>철수</td> <td>김</td> <td>80</td> </tr> </table> </body> </html> |
테이블 테두리 색상
border-color 속성을 사용하여 테두리 색을 설정할 수 있습니다.
| <!DOCTYPE html> <html> <head> <style> th, td { border-style:solid; border-color: #96D4D4; } </style> </head> <body> <h2>Table With Dotted Borders</h2> <p>Use the CSS border-style property to set the style of the borders.</p> <table style="width:100%"> <tr> <th>Firstname</th> <th>Lastname</th> <th>Age</th> </tr> <tr> <td>Jill</td> <td>Smith</td> <td>50</td> </tr> <tr> <td>Eve</td> <td>Jackson</td> <td>94</td> </tr> <tr> <td>John</td> <td>Doe</td> <td>80</td> </tr> </table> </body> </html> |
마무리
이번 글에서는 HTML 테이블의 테두리에 대해 살펴보았다.
테이블에서 테두리를 추가하는 방법, 이중실선과 실선으로 설정하는 방법, 테이블 테두리를 보이지 않게 설정하는 방법, 둥근 테두리, 점선 테두리, 테두리 색깔, 등을 설정하는 것에 대해 실습해보았다.
꼭,,,직접 코딩하고 실습하면서 테이블에 대해 익숙하도록 HTML문서를 작성할 것을 추천한다.
매일 5-10분씩 실습하면 여러분의 HTML실력이 어느 순간 향상되어 있을 것이다.
모두 화이팅하세요!!!
출처 : 이 글의 출처는 w3schools사이트를 참고하였으며 필자가 추가하여 정리한 글입니다.
'HTML > HTML 기본문법' 카테고리의 다른 글
| HTML 테이블 헤더(Table Headers) (0) | 2023.05.08 |
|---|---|
| HTML 테이블 크기(Table Sizes) (0) | 2023.05.07 |
| HTML 테이블(Table) (0) | 2023.05.05 |
| HTML 페이지 제목(Page Title) (0) | 2023.05.04 |
| HTML 파비콘(Favicon) (0) | 2023.05.03 |
댓글