테이블만들기는 <table> 태그로 시작한다.
이후 행만들기는 <tr> </tr>으로 만들어주고 이 사이에 <td>태그를 사용해 표의 데이터를 입력한다(td: 테이블 데이터)
<td>태그와 비슷한 ><th>라는 태그가 있는데 이는 테이블의 제목에 해당되는 셀을 나타낸다.
테이블 셀(<td>)에는 모든 스타일을 적용할 수 있지만 한셀에 적용한다고 해서 모든 셀에 스타일이 적용되는것이 아니다.
모든 셀에 적용하고 싶은 경우에는 테이블을 만들때 썻던 <table>태그에 스타일을 입력해야한다.
여러가지 테이블의 스타일들.
- 배경색 지정하기 : ex)<tr style = "background-color:red;color:white"> 열의 배경색을 빨강, 글자색을 흰색으로 바꾸기
- 외곽선 굵기 지정하기 : <table border="2">
- 셀의 글자 정렬하기 : <td style="vertical-align:top; text-align:center"> 글자가 셀의 위쪽부터 가운데정렬되어 나타남.
- 셀합치기 : colspan="숫자"(가로열을 숫자만큼 합침) rowspan="숫자"(세로열을 숫자만큼 합침)
- 여백 : cellpadding(테이블 테두리와 테이블 셀 사이 공간)과 cellspacing(셀 내 정보 주변의 공간)
cellpadding을 0으로 주면 테이블 내의 모든 정보가 테이블 테두리에 가장 가깝게 정렬된다.
<실습>
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML
1.1//EN""http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>Table 실습</title>
</head>
<body>
<h1> Table 실습</h1>
<table border="2">
<tr>
<th style="width:35px;"></th>
<th style="width:175px;">Team</th>
<th style="width:25px;">W</th>
<th style="width:25px;">L</th>
<th style="width:25px;">GB</th>
</tr>
<tr>
<td style="background-color:red;"></td>
<td>Los Angeles Dodgeres</td>
<td>62</td>
<td>38</td>
<td>-</td>
</tr>
<tr>
<td style="background-color:blue;"></td>
<td>San FranCisco Giants</td>
<td>54</td>
<td>46</td>
<td>8.0</td>
</tr>
<tr>
<td style="background-color:green;"></td>
<td>Arizona Diamondbacks</td>
<td>43</td>
<td>58</td>
<td>19.5</td>
</tr>
<tr>
<td> td를 조금만 넣으면 어떻게 될까?</td>
<td></td>
<td rowspan="2">rowspan<br/> 새로열 셀합치기</td>
</tr>
<tr>
<td> a</td>
<td> a </td>
<td> a</td>
</tr>
<tr>
<td colspan="2">colspan 가로열 셀합치기</td>
<td></td>
</tr>
</body>
</html>
* 테이블을 이용하여 페이지 레이아웃을 구성하기?*
지금 공부하고있는 책에 따르면 테이블을 이용해 페이지 레이아웃을 구성하는 것은 옛날에나 썻던 일이라고 한다. 그 이유는 설계도 불편하고 재설계가 너무 복잡합니다. 또 테이블을 작은 모바일장치에서 보게하는데 불편함이 있기 때문이랍니다. 근데 이밖에도 많은 문제점들이 있답니다.
그리고 CSS를 이용하면 훨씬 더 나은 레이아웃을 만들 수 있고 웹의 표준을 관리하는 W3C에서도 스타일시트를 사용할 것을 권장하고 있다!