9.1 속성 사용하기
HTML에서 테이블 스타일링은 여러 가지 방법으로 할 수 있어. 그중 하나는 테이블 태그와 요소들에 직접 속성을 사용하는 거야. 현대 웹 개발자들은 주로 CSS를 사용해서 스타일링을 하지만, HTML 속성을 아는 건 기본적인 스타일링에 유용해.
주요 테이블 속성들
border 속성
테이블 테두리 두께를 정의해. 보통 값은 픽셀 단위로 설정돼.
HTML
<table border="1">
<tr>
<th>이름</th>
<th>점수</th>
</tr>
<tr>
<td>이반</td>
<td>91</td>
</tr>
<tr>
<td>마리야 </td>
<td>94</td>
</tr>
<tr>
<td>니나</td>
<td>89</td>
</tr>
</table>
cellpadding 속성:
셀 내부의 여백(셀 경계와 내용 사이의 공간)을 정의해.
HTML
<table cellpadding="10">
<tr>
<th>이름</th>
<th>점수</th>
</tr>
<tr>
<td>이반</td>
<td>91</td>
</tr>
<tr>
<td>마리야</td>
<td>94</td>
</tr>
<tr>
<td>니나</td>
<td>89</td>
</tr>
</table>
cellspacing 속성:
셀들 간의 거리를 정의해.
HTML
<table cellspacing="5">
<tr>
<th>이름</th>
<th>점수</th>
</tr>
<tr>
<td>이반</td>
<td>91</td>
</tr>
<tr>
<td>마리야</td>
<td>94</td>
</tr>
<tr>
<td>니나</td>
<td>89</td>
</tr>
</table>
width와 height 속성:
테이블의 너비와 높이를 정의해. 이 속성들은 <td>와 <th> 태그에서도 셀 크기를 지정하는 데 사용할 수 있어.
HTML
<table style="text-align: left;" width="100%" height="200">
<tr>
<th width="50%">이름</th>
<th width="25%">프로젝트</th>
<th width="25%">도시</th>
</tr>
<tr>
<td>알리사</td>
<td>25</td>
<td>파리</td>
</tr>
</table>
align 속성:
테이블을 페이지에서 정렬하는 데 사용해 (left, right, center).
HTML
<table align="center">
<tr>
<th>이름</th>
<th>점수</th>
</tr>
<tr>
<td>이반</td>
<td>91</td>
</tr>
<tr>
<td>마리야</td>
<td>94</td>
</tr>
<tr>
<td>니나</td>
<td>89</td>
</tr>
</table>
bgcolor 속성:
테이블이나 셀들의 배경색을 정의해.
HTML
<table bgcolor="#f0f0f0">
<tr>
<th>이름</th>
<th>점수</th>
</tr>
<tr>
<td>이반</td>
<td>91</td>
</tr>
<tr>
<td>마리야</td>
<td>94</td>
</tr>
<tr>
<td>니나</td>
<td>89</td>
</tr>
</table>
9.2 테이블 셀을 위한 속성
테이블 셀을 위한 속성들
colspan 속성:
가로로 셀을 병합해.
HTML
<td colspan="2">병합된 셀</td>
rowspan 속성:
세로로 셀을 병합해.
HTML
<td rowspan="2">병합된 셀</td>
align 속성:
셀 내용의 가로 정렬을 정의해 (left, right, center).
HTML
<td align="center">가운데 정렬된 텍스트</td>
valign 속성:
셀 내용의 세로 정렬을 정의해 (top, middle, bottom).
HTML
<td valign="top">상단에 위치한 텍스트</td>
bgcolor 속성:
셀 배경색을 정의해.
HTML
<td bgcolor="#ffcc00">컬러 배경</td>
9.3 완성된 예제
속성을 사용한 테이블 스타일링의 완성된 예제:
HTML
<table border="1" cellpadding="10" cellspacing="5" width="80%" align="center" bgcolor="#e0e0e0">
<caption>학생 리스트 및 점수</caption>
<thead bgcolor="#c0c0c0">
<tr>
<th align="left">이름</th>
<th align="center">나이</th>
<th align="right">도시</th>
</tr>
</thead>
<tbody>
<tr>
<td>이반</td>
<td align="center">30</td>
<td align="right">런던</td>
</tr>
<tr>
<td colspan="2" align="center">마리야와 페트르</td>
<td align="right">리버풀</td>
</tr>
<tr>
<td rowspan="2" valign="middle">안나</td>
<td>25</td>
<td>맨체스터</td>
</tr>
<tr>
<td>27</td>
<td>리즈</td>
</tr>
</tbody>
<tfoot>
<td colspan="3" align="center">테이블 끝</td>
</tfoot>
</table>
예제 설명
border="1": 테이블 테두리 두께를 1픽셀로 설정cellpadding="10": 모든 테이블 셀 내부 여백을 10픽셀로 설정cellspacing="5": 테이블 셀들 사이의 간격을 5픽셀로 설정width="80%": 테이블 너비를 부모 요소의 80%로 설정align="center": 테이블을 페이지 중앙에 정렬bgcolor="#e0e0e0": 테이블의 배경색 설정<caption>: 테이블 제목 추가-
<thead>와<tbody>: 테이블 헤더와 본문을 그룹화. 헤더의 배경색은bgcolor="#c0c0c0"로 설정 <th>와<td>: 헤더와 데이터 셀들을 정의<align>와<valign>: 셀 내용의 가로 및 세로 정렬을 정의<colspan>와<rowspan>: 셀들을 가로 및 세로로 병합
GO TO FULL VERSION