우리는 앞서 HTML 챕터에서 표를 만들고 행을 생성하는 기본적인 과정을 배웠습니다. 이제 이렇게 생성된 표에 적용할 수 있는 스타일에 대해서도 한번 살펴보도록 하겠습니다.
2. 내용 입력하기(3) - 표 생성하기 1
이제 html 문서 내에서 표를 만드는 방법을 살펴볼 차례입니다. 일반적으로 워드프로세서나 게시판의 텍스트 에디터에서는 표 생성 도구가 제공되기 때문에 아주 간편하게 드래그나 행/열 칸 수
nozeroslope.tistory.com
2. 내용 입력하기(3) - 표 생성하기 2
지난 시간에는 기본적인 표(table)의 생성과 영역의 구분에 대해서 학습했습니다. 표의 외형과 스타일을 지정하는 부분에 대해서는 추구 CSS 학습을 통해 진행할 예정이니 조금만 기다려 주세요. 2
nozeroslope.tistory.com
2. 내용 입력하기(3) - 표 생성하기 3
지금까지는 주로 html에서 테이블을 생성하고 내용을 작성한 다음, 셀을 합치는 기능까지 살펴보았습니다. 오늘은 CSS 레벨이 아닌 html 태그 레벨에서 스타일을 지정할 수 있는 태그를 살펴보려고
nozeroslope.tistory.com
○ caption-side : 표 제목의 위치 지정
위 HTML 챕터에서 표의 제목을 <caption> </caption> 태그를 이용해서 달아줬던 것을 기억하실 것입니다. 그런데 기본 태그로 표 제목을 지정하게 되면 표의 제목이 표 상단에 노출되었습니다. 이 표 제목의 위치도 스타일을 통해서 상단/하단을 지정해 보도록 하겠습니다.
선택자 {
caption-side: top | bottom
}
○ border : 표의 테두리 속성
표의 테두리 선과 관련된 스타일을 지정할 때는 border 속성을 사용하게 됩니다. 이때 테두리는 두 가지의 영역의 스타일을 지정하게 되는데, 바로 표 (바깥)테두리와 셀 테두리입니다. 표 전체를 감싸는 외부 테두리와 셀 하나하나에 적용되는 테두리가 각각 지정되는 것이죠. 설명만으로는 바로 이해가 가지 않을 테니, 예시를 하나 만들어 보겠습니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
table {
caption-side: bottom;
border: 5px solid red;
}
td, th {
border: 2px solid black;
padding: 25px;
text-align: center;
}
</style>
</head>
<body>
<table>
<caption>현재 재고 현황 표</caption>
<thead>
<tr>
<th>분류</th>
<th>이름</th>
<th>색상</th>
<th>비고</th>
</tr>
</thead>
<tbody>
<tr>
<td rowspan="2">CPU</td>
<td>i9-13genth</td>
<td colspan="2">재고없음</td>
</tr>
<tr>
<td>i7-11genth</td>
<td>white</td>
<td>재고있음</td>
</tr>
<tr>
<td rowspan="2">VGA</td>
<td>RTX9999</td>
<td>green</td>
<td>재고있음</td>
</tr>
<tr>
<td>GTX13999</td>
<td colspan="2">재고없음</td>
</tr>
</tbody>
</table>
</body>
</html>
위와 같은 표에서 <table> 태그와 <td>, 그리고 <th> 셀에 적용되는 스타일을 각각 생성해 보았습니다. 구분을 편하게 하기 위해 다소 과격(?)하게 스타일을 적용했으니 감안해 주세요. 아래 결과를 확인해 봅시다.
우리는 아마도 표의 스타일이 하나의 테두리에 셀이 가로 세로로 스타일이 일괄적으로 적용될 것이라고 생각했지만, 예상과는 다르게 거대한 테이블 테두리 안에 셀이 각각 독립적으로 들어와 있는 형태로 스타일이 적용되었습니다. 이것이 기본적인 표의 스타일 적용 방식이니 기억해 두시기를 바랍니다.
○ border-spacing : 셀 사이의 여백
위에서 적용한 스타일 예시를 보게 되면, 표와 셀 개별 영역에 따로 테두리를 지정했을 때 여백이 생기는 것을 볼 수 있습니다. 이때, border-spacing 속성을 통해서 기본적으로 셀과 셀 사이의 여백 값을 조절할 수 있습니다. 수평 거리와 수직 거리를 공백을 통해 구분하고, 두 개의 값이 동일하다면 한 개만 지정해도 됩니다. 해당 속성은 <table> 태그에 지정하도록 합니다.
단, 아래에서 배울 border-collapse 속성에서 속성 값을 collapse로 지정할 경우 사이의 여백이 기본적으로 없어지기 때문에 해당 속성은 무의미해집니다.
선택자 {
border-spacing: 수평거리 수직거리;
}
/* 생략 */
<style>
table {
caption-side: bottom;
border: 5px solid red;
border-spacing: 15px;
}
td, th {
border: 2px solid black;
padding: 25px;
text-align: center;
}
</style>
/* 후략 */
○ border-collapse : 표와 셀 테두리를 합쳐주는 속성
우리는 위에서 <table> 태그의 border 속성과 <td>와 같은 셀 태그의 border 속성을 각각 부여했을 때, 따로 생성되면서 두 줄인 것처럼 표시되는 것을 확인했습니다. <table> 태그에서 border-collapse 속성을 부여함으로써, 위의 예제처럼 기본적으로 표가 출력될지 여부와 혹은 우리가 워드 같은 프로그램에서처럼 표와 셀의 테두리가 합쳐질지 여부를 확인할 수 있습니다.
이 속성값 중 separate가 디폴트 값이며, 위와 같은 상태입니다. 반면 collapse를 지정하게 되면 표와 셀의 테두리가 합쳐지게 됩니다. 위의 예시를 수정해 결과를 확인해 보겠습니다.
/* 생략 */
<style>
table {
caption-side: bottom;
border: 5px solid red;
border-collapse: collapse;
}
td, th {
border: 2px solid black;
padding: 25px;
text-align: center;
}
</style>
/* 후략 */
'Programming > HTML+CSS' 카테고리의 다른 글
| [CSS] 3. 박스 모델(2) - 사이즈, 크기 지정 (0) | 2023.04.05 |
|---|---|
| [CSS] 3. 박스 모델(1) - 블록 레벨, 인라인 레벨 (0) | 2023.04.03 |
| [CSS] 2. 텍스트 스타일(5) - 목록 스타일 (0) | 2023.04.01 |
| [CSS] 2. 텍스트 스타일(4) - 텍스트 정렬 2 (0) | 2023.03.30 |
| [CSS] 2. 텍스트 스타일(4) - 텍스트 정렬 1 (0) | 2023.03.29 |
