HTML에서의 Table 활용과, 왜 CSS를 활용하여 border를 만들어야 하는지에 대해, colspan 과 rowspan 그리고 tbody #3

TABLE

 

오늘은 HTML 의 Table 기능에 대해 공부했다. 

기본적으로 Table은 우리가 보는 아래와 같은 표를 만드는 element이다. 

행(가로)
열(세로)

<table>

</table>

이런식으로 구성되어 있고, 내부에는 row(세로축, 열) 와 column(가로축, 행)이 들어가게 된다. 

<tr></tr>로 table row(열)을 표현하고, 행의 경우에는 <td></td> (table data의 약자) 태그를 활용하여 tr 안에 들어가는 데이터가 차례대로 행이 되게 된다. 

 

ex) 

<table>

  <tr>

     <td>Myfavorite Genre</td>

     <td>Bossa nova</td>

     <td>Hip hop</td>

  </tr>

</table>

 

위와 같은 코드라면 아래와 같이 나올 것 이다.

Myfavorite Genre

Bossa nova

Hip hop

 

티스토리의 HTML 편집기능을 활용하여 한번 표시해보도록 해보겠다. 

 

Myfavorite Genre

Bossa nova

Hip hop

 

위 모양처럼 구분 선이 안보이는 것을 알 수 있는데, 

그 때 필요한 것이 border 이고, 그 border와 연관하여 css의 필요성이 나오게 된다. style 하는 것에 대해서는 이후에 css 단계에서 설명될 것이므로 넘어간다. 

 

 

colspan 과 rowspan

<td>의 오프닝 태그에 사용되어 

colspan = "정수"의 형태로 활용한다. 셀을 병합하는 기능으로 이해하고 있다. 

 

ex) <td colspan ="2"> ~~ </td> 

 

rowspan을 활용한 예 , 아래의 경우 두번 째 row의 td "출근" 에서 rowsapn = "2" 가 한번 사용되었고 , 마찬가지로 두번 째 row의 td "쉬는날"에서 rowsapn ="3"이 사용되었다. 보다시피

 

	월요일	일요일
아침	출근	쉬는 날
오후
저녁	식사

 

 

왜 Table의 border를 표시할 때 CSS를 활용해야 하는 걸까? 

소프트웨어 엔지니어링에서는 'separation of concerns' 라고 하는 디자인 규범이 있는데, 확장가능하고 또한 쉽게 유지보수가 가능한 코딩 구조를 말한다. 웹 개발자들에게 이러한 가이드라인들은 이런 구조(여기서는 HTML을 말함)를 우리가 표현하는(CSS를 말함) 것으로부터 분리시켜서 볼 수 있게 한다. 

(codecademy forum에서 발췌하여 번역) 

 

 기본적으로 레고로 만든 집으로 이해하고 있는데, 우리가 레고로 한 블럭 블럭단위로 구성된 장난감집을 쌓아 올린다고 생각하면, 이후에 부품을 교체하거나 할때 한덩이로 된 플라스틱 장난감보다 용이한 것 처럼 , 여러 개발자들이 달려드는 한 결과물에 대해 블럭 단위, 유닛 단위로 구분되어 첫 시작부터 하게 되면 이후에 유지보수할 때 편하다는 것이 골자인 것 같다. 

 

 

Tbody의 경우 표가 길어질 경우 표를 단락단락 구분할 수 있게 해주는 태그이다. 일반적으로 제목(th)는 제외하고 묶을 수 있다. 

<tbody></tbody> 형식

표의 외양을 결정하는 CSS의 경우 CSS파트를 공부하면서 정리하려고 한다. 

 TABLE 파트 정리 

 

 Table 로 표를 만든다.

 

 tr은 table의 열(세로축)을 만든다 - table row의 약자   (하지만 개념적으로는 가로축의 첫 공간을 만든다고 생각하고 있긴 합니다) 

 

 tr 로 열을 생성하고 나면 그 안에 들어가는 td 로 데이터를 채워줄 수 있다. - table data의 약자 

 

Table heading이라는 것은 data의 의미를 보다 명확히 하기 위한 장치이다. th로 표시함  (표의 외곽에 위치한 셀들을 의미함) 

 

Table data는 두가지 span을 이용할 수 있다. rowspan과 colspan , 표의 병합기능과 유사하다.

 

head , body , footer 라는 세가지 부분으로 나눌 수 있다.  - 각각 thead , tbody,  tfoot 이라는 태그를 활용한다.