단 5 분만에 CSS 표 테두리를 만드는 방법 알아보기
CSS와 HTML 테이블이 섞이지 않는다는 말을 들었을 것입니다. 이것은 단순히 사실이 아닙니다. 예, 레이아웃 용 HTML 표를 사용하는 것이 더 이상 웹 디자인 모범 사례가 아니며 CSS 레이아웃 스타일로 대체되었지만 웹 페이지에 표 형식의 데이터를 추가하는 데 사용할 표는 여전히 올바른 마크 업입니다.
불행히도, 많은 웹 전문가들이 독약이라고 생각하는 테이블을 피하고 있기 때문에, 많은 전문가들은이 HTML 요소와 웹 페이지에서 처리해야하는 투쟁에 대한 경험이 거의 없습니다. 예를 들어 페이지에 표가 있고 표 셀에 내부 선을 추가하려는 경우를 예로들 수 있습니다.
CSS 표 테두리
CSS 를 사용하여 표에 테두리를 추가하면 표 바깥에만 테두리가 추가됩니다. 해당 테이블의 개별 셀에 내부 선을 추가하려면 내부 CSS 요소에 경계선을 추가해야합니다. HR 태그를 사용하여 개별 셀 내부에 줄을 추가 할 수도 있습니다.
이 기사에서 다루는 스타일을 적용하려면 분명히 웹 페이지에 표 가 있어야합니다. 그런 다음 문서의 머리 부분에 스타일 시트 를 내부 스타일 시트로 만들어야합니다 ( "사이트"가 단일 페이지 인 경우에만 가능) 또는 외부 스타일 시트 로 문서에 첨부됩니다. 사이트가 여러 페이지 인 경우 - 하나의 외부 시트에서 모든 페이지의 스타일을 지정할 수 있습니다. 스타일을 넣어 스타일 시트에 내부 선을 추가합니다.
시작하기 전에
먼저 테이블에 선을 표시 할 위치를 결정해야합니다. 다음과 같은 몇 가지 옵션이 있습니다.
- 그리드를 형성하기 위해 모든 셀을 둘러싼 다.
- 열 사이에 선 배치;
- 행 사이에; 또는
- 특정 열이나 행 사이.
개별 셀 주위 또는 개별 셀 내부에 선을 배치 할 수도 있습니다.
표의 모든 셀 주위에 선을 추가하는 방법
표의 모든 셀 주위에 선을 추가하고 표 모양의 효과를 만들려면 스타일 시트에 다음을 추가하십시오.
td, th {
테두리 : 단색 1px 검정색;
}
표의 열 사이에 선을 추가하는 방법
열 사이에 선을 추가하려면 (테이블의 열에 위에서 아래로 수직선이 생김) 스타일 시트에 다음을 추가하십시오.
td, th {
border-left : 단색 1px 검정색;
}
그런 다음 첫 번째 열에 표시하지 않으려면 th 및 td 셀에 클래스를 추가해야합니다. 이 예에서는 셀에 경계선 이 없는 것으로 가정하고 더 구체적인 CSS 규칙으로 테두리를 제거합니다. 여기에 우리가 사용할 HTML 클래스가 있습니다 :
class = "no-border">
그리고 우리 스타일 시트에 다음 스타일을 추가 할 수 있습니다 :
.no-border {
border-left : none;
}
표의 행 사이에 선을 추가하는 방법
열 사이에 줄을 추가하는 것과 마찬가지로 스타일 시트에 하나의 간단한 스타일 만 추가하면됩니다. 아래 CSS는 테이블의 각 행 사이에 수직선을 추가합니다.
tr {
border-bottom : 단색 1px 검정색;
}
그리고 테이블 아래쪽에서 테두리를 제거하려면 다시 한 번 해당 tr 태그에 클래스를 추가합니다.
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 검정색;
}
표의 개별 셀 내부에 선을 추가하는 방법
셀의 내용 안에 선을 추가하려면 가장 쉬운 방법은 가로 규칙 태그 (
)를 사용하는 것입니다.
유용한 팁
테두리에 틈이 생겼다면 테두리 접기 스타일이 테이블에 설정되어 있는지 확인해야합니다. 스타일 시트에 다음을 추가하십시오.
테이블 {
국경 붕괴 : 붕괴;
}
위의 CSS를 모두 피하고 테이블 태그에 border 속성을 사용할 수 있습니다. 그러나 그의 속성은 CSS의 유연성보다 훨씬 덜 유연합니다. 테두리의 너비 만 정의 할 수 있고 테이블의 모든 셀 주위에 테두리 만 가질 수도 있고 없어도됩니다.