제발 제 코드에 훈수하세요

바둑,오목,빙고,땅따먹기 등등 

우리는 수없이 많은 네모사각 표들을 접해왔다.

표절, 뇌절 심지어 게시판도 표이다.

오늘은 HTML에서 사용하는 표 태그에 대해 배워보려고 한다.

표 태그

표 태그는 <table>로 쓰고 그 안에 <tr>,<td>,<th>등을 사용하여 형태를 나타낸다.

<thead>,<tbody>,<tfoot>의 구조안에 각각의 내용들을 넣어 줄 수 있다.

html모드로 이를 확인해보면

<table>
<thead>
<tr>
<th>제목이</th>
<th>되는</th>
<th>행이다</th>
<th>.</th>
</tr>
</thead>
<tbody>
<tr>
<td>이렇게</td>
<td>블로그</td>
<td>내에서</td>
<td>표를</td>
</tr>
<tr>
<td>만들</td>
<td>수</td>
<td>있다</td>
<td>.</td>
</tr>
</tbody>
<tfoot>
<!-- 보통 합계나 비고 등으로 쓰인다 안쓸 수 있음-->  
</tfoot>
</table>

여기서 행과 열을 구분할 수 있다. 

행은 <tr>을 쓰고 열은 <td>를 쓴다.

( 행이 가로,row 열이 세로,col )

위의 코드와 같이 <thead>에는<tr>안에 제목셀이되는 <th>를 쓰고 이는 굵은 글씨로 표시된다.

<th>는 scope라는 속성을 갖는데 방향을 표시할 때 쓰는 속성이다.

scope="row"이면 행쪽, scope="col"이면 열쪽이다. 

<tbody>에는 <tr>안에 <td>를 쓰고 본문이 되는 내용을 써준다.

하늘색 줄은 아무의미 없다 그냥 한 것이다.

정리하면 <table>안에 <tr>로 행을 만들고 <th>로 제목을 만들고 <td>로 본문을 적어주면 된다.

그것의 구조는 <thead>에 <tr><th>, <tbody>에 <tr><td>이다.

※<table>바로 밑에 <caption>을 사용해 표에 캡션을 달 수 있다. 

잠깐 말했던 행(row)과 열(col)을 통해 셀 병합을 할 수 있다.

셀병합

셀 병합은 셀을 합친다는 뜻이고 thead와 tfoot 구간에서는 사용할 수 없다.

위의 표를 이렇게 행쪽으로 합치는 법과 열쪽으로 합치는 법을 배워보겠다.

바로 <rowspan>과 <colspan>을 사용하는 것인데 각각 행확장, 열확장이라는 뜻을 가진다.

span은 확장이라는 뜻이 있는데 여기서 중요한 점은 방향으로 확장이라는 것이다.

rowspan을 쓰면 행을 확장한다 가로로 확장인줄 알겠지만 세로로 확장한다

어? 세로는 열인데? 하지만 행을 확장하는 것이기 때문에 가로가 확장되면 세로와 합쳐지는(이게 뭔소리..?)

여하튼 rowspan은 행 확장, colspan은 열 확장으로 각각 세로병합, 가로병합이다.(헷갈리지 않게 주의하자!)

<td style="width: 25%;" colspan="2">이렇게<br />블로그</td>
<td style="width: 25%;" rowspan="2">내에서<br />있다</td>

"이렇게" 와 "블로그"는 가로병합이므로 열 확장 => colspan

"내에서" 와 "있다"는 세로병합이므로 행 확장 => rowspan

이꼴(=)뒤에 숫자는 칸이나 줄의 수이다.

headers속성

저번 페이지에 말했던 접근성을 위해 필요한 속성이다.

시각장애우들은 소리로 표를 알기위해 어떤 행과 어떤 열에 있는 지를 알아야한다.

이것을 위해서 headers에는 id값을 받아 그것을 표시해 줄 수 있다.

"되는"에 id값 "doinun"을 주게 되고 "만들"에 id값 "mandle"을 준다면 "수"는 headers값으로 "doinun mandle"을 가지면 된다.

<td id = "doinun">되는</td>
<td id = "mandle">만들</td>
<td headers = "doinun mandle">수</td>

이렇게하면 시각장애우도 수가 어떤 행과 어떤 열의 칸인지 알 수 있을 것이다.

공감 또는 훈수 부탁드립니다.(내가 그걸 모를 꺼 같니?? 라던가 응 아니야~이거야~ 해주세요) 

그럼~ 앙 제바