CSS를 사용하여 HTML 표에 내부 테두리 추가

CSS와 HTML 테이블이 섞이지 않는다는 말을 들었을 것입니다. 그렇지 않다. 예, 레이아웃 용 HTML 표를 사용하는 것은 더 이상 CSS 레이아웃 스타일로 대체 되었기 때문에 더 이상 웹 디자인 모범 사례가 아니지만 웹 페이지에 표 형식 데이터를 추가하는 데 사용되는 표는 여전히 올바른 마크 업입니다.

많은 웹 전문가가 테이블에서 벗어나면 문제가 없다고 생각하기 때문에 많은 전문가가이 공통된 HTML 요소로 작업 한 경험이 거의 없으며 웹 페이지의 표 셀에 내부 선을 추가해야 할 때 어려움을 겪습니다.

CSS 표 테두리

CSS를 사용하여 표에 테두리를 추가하면 표 바깥에만 테두리가 추가됩니다. 해당 테이블의 개별 셀에 내부 선을 추가하려면 내부 CSS 요소에 경계선을 추가해야합니다. HR 태그를 사용하여 개별 셀 내부에 줄을 추가 할 수 있습니다.

이 자습서에서 다루는 스타일을 적용하려면 웹 페이지에서 테이블이 필요합니다. 그런 다음 문서의 머리 부분에 내부 스타일 시트로 스타일 시트를 만들거나 (한 페이지 만 다루는 경우) 스타일 시트를 외부 스타일 시트 (사이트에 여러 페이지가있는 경우)로 첨부합니다. 스타일을 넣어 스타일 시트에 내부 선을 추가합니다.

시작하기 전에

테이블에 선을 표시 할 위치를 결정하십시오. 다음과 같은 몇 가지 옵션이 있습니다.

그리드를 형성하기위한 모든 셀 주변
열 사이에 선 배치
행 사이
특정 열이나 행 사이.

개별 셀 주위 또는 개별 셀 내부에 선을 배치 할 수도 있습니다.

표의 모든 셀 주위에 선을 추가하는 방법

표의 모든 셀 주위에 선을 추가하고 표 효과를 작성하려면 스타일 시트에 다음을 추가하십시오.

td, th {테두리 : 단색 1px 검정색;}

표의 열 사이에 선을 추가하는 방법

열 사이에 줄을 추가하여 테이블의 열에 위에서 아래로 수직선을 생성하려면 스타일 시트에 다음을 추가하십시오.

td, th {border-left : 단색 1px 검정색;}
첫 번째 열에 세로선을 표시하지 않으려면 클래스를 일 과 td 세포. 이 예제에서, 국경없는 CSS 규칙을 사용하여 테두리를 제거합니다. 사용하는 HTML 클래스는 다음과 같습니다.

class = "no-border">
그런 다음 스타일 시트에 다음 스타일을 추가하십시오.

.no-border {border-left : none;}
표의 행 사이에 선을 추가하는 방법

열 사이에 줄을 추가하는 것과 마찬가지로 다음과 같이 하나의 간단한 스타일을 스타일 시트에 추가하여 행 사이에 가로줄을 추가 할 수 있습니다.

tr {border-bottom : 단색 1px 검정색;}
테이블의 맨 아래에서 테두리를 제거하려면 다시 한 번 클래스를 추가하면됩니다.

꼬리표:

class = "no-border">
스타일 시트에 다음 스타일을 추가하십시오.

.no-border {border-bottom : none;}
테이블의 특정 열이나 행간에 선을 추가하는 방법

특정 행이나 열 사이의 행만 원하면 해당 셀이나 행에 클래스를 사용해야합니다. 열 사이에 선을 추가하는 것은 해당 열의 모든 셀에 클래스를 추가해야하기 때문에 행 사이보다 약간 어렵습니다. 테이블이 일종의 CMS에서 자동으로 생성되는 경우 가능하지 않을 수 있지만 페이지를 직접 코딩하는 경우이 효과를 얻기 위해 필요한 적절한 클래스를 추가 할 수 있습니다.

class = "side-border">
행을 추가하려는 행에 클래스를 추가 할 수 있으므로 행 사이에 행을 추가하는 것이 더 쉽습니다.

class = "border-bottom">
그런 다음 스타일 시트에 CSS를 추가하십시오.

.border-side {border-left : 단색 1px 검정색;}.border-bottom {border-bottom : 단색 1px 검정색;}
테이블의 개별 셀 주위에 선을 추가하는 방법

개별 셀 주위에 선을 추가하려면 경계선을 지정할 셀에 클래스를 추가합니다.

class = "border">
그런 다음 스타일 시트에 다음 CSS를 추가하십시오.

.border {테두리 : 단색 1px 검정색;}
표의 개별 셀 내부에 선을 추가하는 방법

셀의 내용 안에 행을 추가하려면 가장 쉬운 방법은 가로 룰 태그 ().

유용한 팁

테두리에 간격이있는 경우 경계 접기 스타일이 테이블에 설정되어 있는지 확인하십시오. 스타일 시트에 다음을 추가하십시오 :

테이블 {국경 붕괴 : 붕괴;}
모든 것을 피하고 테이블 태그에 border 속성을 사용할 수 있습니다. 그러나 경계의 너비 만 정의 할 수 있고 테이블의 모든 셀 주위에 테두리를 둘 수 있기 때문에이 속성은 CSS보다 유연성이 떨어집니다.