HTML 테이블 테두리

출처: Dev.to

HTML 테이블 테두리

테두리 추가 방법

table, th, td {
  border: 1px solid black;
}

접힌 테이블 테두리

다음과 같이 하면 테두리가 하나의 선으로 합쳐집니다:

table, th, td {
  border: 1px solid black;
  border-collapse: collapse;
}

테이블 테두리 스타일링

table, th, td {
  border: 1px solid white;
  border-collapse: collapse;
}
th, td {
  background-color: #96D4D4;
}

둥근 테이블 테두리

예시:

table, th, td {
  border: 1px solid black;
  border-radius: 10px;
}

CSS 선택자에서 table을 제외하여 테이블 주변 테두리를 생략하기

예시:

th, td {
  border: 1px solid black;
  border-radius: 10px;
}

점선 테이블 테두리

다음 값들을 사용할 수 있습니다:

• dotted
• dashed
• solid
• double
• groove
• ridge
• inset
• outset
• none
• hidden

예시:

th, td {
  border-style: dotted;
}

테두리 색상

예시:

th, td {
  border-color: #96D4D4;
}

참고 자료

• https://www.w3schools.com/html/html_table_borders.asp
• https://www.geeksforgeeks.org/html/html-table-border-attribute/