1. 개요
1. 테이블 속성
| 속성 | 의미 |
| table-layout | table layout설정 |
| width | table 너비 지정 |
| height | table 높이 지정 |
| text-align | Cell 내부 내용을 수평 정렬 |
| vertical-align | Cell 내부 내용을 수직 정렬 |
2. 테두리 속성
| 속성 | 의미 |
| border-collapse | 테두리 분리/통합 설정 |
| border-style | 테두리 스타일 설정 |
| border-width | 상하좌우 4개의 테두리 너비 설정 |
| border-color | 테두리 색상 설정 |
| border | 테두리 관련 속성을 한번에 지정하는 단축형 속성 |
2. table-layout
- {table-layout: auto(default값) | fixed;}
- fixed = table cell의 width, height를 고정
3. border-collapse
- {border-collapse: separate(default) | collapse}
- collapse = 인접한 테두리 합치기
+) 인접한 cell 사이의 거리 지정 = {border-spacing : 수평길이 수직길이}
[예시코드]
<head>
<style>
table{
border-collapse: collapse;
}
th, td{
border: 1px solid black;
}
</style>
</head>
<body>
<table>
<thead>
<tr>
<th>음료</th>
<th>가격</th>
</tr>
</thead>
<tbody>
<tr>
<td>콜라</td>
<td>1500</td>
</tr>
<tr>
<td>아메리카노</td>
<td>1000</td>
</tr>
</tbody>
</table>
</body>
[결과]
4. border-style
- {border-style: none | solid | hidden | dotted | ... ;}
- 값이 1개 일 때 = 모든 면에 적용
- 값이 2개일 때 = {(top & bottom), (right & left)}에 적용
- 값이 3개일 때 = {top, (left & right), bottom}에 적용
- 값이 4개 일 때 = {top, right, bottom, left}로 적용
=> padding, margin도 규칙은 동일함
5. border
- 4개의 테두리에 같은 스타일 적용
- "border-width, border-style, border-color" 순으로 작성
*콤마 없어야 함
th, td{
border: 1px solid black;
}
'Programming > CSS' 카테고리의 다른 글
| 7. Positioning (0) | 2022.03.13 |
|---|---|
| 5. UI(User Inteface) 속성 (0) | 2022.03.12 |
| 4. Text 속성 (0) | 2022.03.12 |
| 3. Font 속성 (0) | 2022.03.12 |
| 2. 선택자 (0) | 2022.03.12 |