HTML 테이블

저는 제 반려동물(pet)들의 이름을 나열한 리스트를 가진

웹 페이지를 만들어보려고 합니다

이 리스트를 보세요
어떤 것이 궁금한가요?

저는 Black & White, Deamon, Angel이라는
이름을 가진 반려동물이 있어요

그러나 그들은 어떠한 종류의 반려동물인가요?

그들은 어떤 색인가요?

그들은 몇 살인가요?

저는 여러분의 질문에 대답할 수 있도록

이 리스트에서 반려동물들에 대해
보다 많은 정보를 주고 싶습니다

그러기 위해서 저는 중첩된(nested) 리스트를 만들거나

또는 여러분이 이미 알고 있는 것처럼
괄호 안에 정보를 넣을 수 있습니다

Black & white은 토끼이고

Deamon은 고양이이며

Angel도 고양이입니다

그러나 저는 이것이 마음에 들지 않네요
왜냐하면 전혀 정돈되어 보이지 않기도 하고

한눈에 쉽게 전체 내용을 훑어보기도 쉽지 않고

게다가 모든 종을 한눈에 보기도 어렵습니다

사실 이것은 테이블을 위한 완벽한 예제입니다

각각의 가로줄(row)에는 각 반려동물의 정보를 적고

각각의 세로줄(column)에는 남들에게 공유하고 싶은

반려동물이 가진 특성을 적어주면 될 것 같습니다

HTML에서 테이블을 만들기 위해서는
아주 많은 양의 태그(tag)들이 필요할 것입니다

그러니 스스로 각오를 다지고 대비하세요

그렇다고 이런 모든 태그들을
기억하는 것에 대해서 걱정하진 마세요

나중에 언제든지 태그들을 찾아볼 수 있으니까요

모든 테이블 태그들을 외우는데 10년이나 걸렸어요

물론 지금은 전문가지요

좋아요 그럼 준비되었나요?

첫 태그는 적절하게도 '' 태그입니다

다음으로는 테이블의 각 세로줄에 이름을 적기 위해
테이블의 헤더(header)영역이 필요합니다

그러므로 '' 태그를 써줍니다

그 안에 보통은 헤더 칸들이 하나의 가로줄로 나열되 있습니다

언제든지 테이블에 가로줄을 만들기 위해서는
'' 태그을 사용하면 됩니다

그 가로줄 안에 헤더 칸들을 만듭니다

하나의 헤더 칸을 그리기 위해서
태그를 사용합니다

좋아요, 첫 번째 세로줄에는 어떤 이름을 붙일까요?

각 줄을 구별하는데 가장 중요한 정보인
이름을 적어볼게요

그리고 이것은 각 동물을 구별하는 식별자가 될 것입니다

다음으로는 종을 적을 또 다른 세로줄을 추가하고

마지막으로 색을 쓸 세로줄을 추가합니다

지금은 이정도면 적당한 것 같습니다

그럼 각 줄에 데이터(data)를 추가해봅시다

데이터를 적는 줄은 '' 태그 아래에

'' 태그를 적어주는 것으로 시작합니다

그 다음엔 다시한번 가로줄을 쓰기 위해서

'' 태그를 사용합니다

하지만 그 안에 '' 태그를 사용하는 대신에
'' 태그를 사용할 것입니다

왜냐면 우리는 헤더(header)가 아닌
본문(body)에 가로줄을 만들기 때문입니다.

태그는 표(tabular)의 데이터(data)의 약자입니디

그러면 첫 번째 줄의 첫 번째 칸에는

어떠한 값(value)가 들어가야 할까요?

제가 만들었던 리스트를 다시한번 살펴보기로 하죠

제가 만든 리스트의 첫 번째 줄에
Black & white라고 써있네요

이것은 그 반려동물의 이름입니다

그러므로 간단하게 'Black & white' 라고 쓰겠습니다

다음으로 두번째 '' 태그를 적어줍니다

두 번째 '' 태그를 보면 '종'이라 쓰여있으므로
여기에는 반려동물의 종을 적어야 함을 알 수 있습니다

그리고 Black & white은 토끼였으니

'rabbit'이라고 쓸게요

마지막으로 위에서 했던 방식대로

세번째 '' 태그를 보면
'색'이라고 써져 있으므로

세번째 '' 태그에는 그에 해당하는
정보를 적어주어야 할 것입니다

아마도 제가 이 토끼의 이름을 지을때
저는 그리 창의적인 아이는 아니었던 것 같아요

여러분도 토끼의 색깔을
쉽게 짐작하실수 있으실 거에요

좋아요. 그럼 다음줄로 넘어가보죠

먼저 간단한 트릭(trick)을 알려드릴게요

먼저 첫 번째 줄을 작성하고 난 뒤에

그 첫 번째 줄을 선택하고

여러분의 운영체제(Operationg system)에 따라서

키보드의 단축키인 ctrl키와 C키
혹은 command와 C키를 눌러서

해당 내용을 복사(copy)합니다

그 다음에는 붙여넣기(paste)를 할겁니다
역시 운영체제에 맞게

키보드의 단축키인 ctrl키와 V키
혹은 command와 V키를 눌러서

내용을 붙여 넣어줍니다

이렇게 붙여준 내용에서
조금만 값을 바꾸어주면 됩니다

그럼 값을 각각 Deamon, cat
그리고 black으로 바꾸어줍니다

그다음에 다시 한 번 복사-붙여넣기를 해주세요

그다음에 값을 각각 Angel, cat
그리고 orange로 바꾸어줍니다

좋아요
원래는 엄청 지루하게

''태그와 ''태그를 계속해서 써야만 했지만

이렇게 복사하고 붙여넣기 방식을 이용하면
덜 지루하게 작업할 수 있어요

그렇게 우리는 테이블을 하나 만들어 보았습니다

간단하게 더 많은 세로줄을 추가할 수도 있어요

단순히 헤더에 또 다른 ''태그를 추가하고

'' 태그 안의 각 줄에도 그렇게 추가해주세요

제 반려동물에 대해 보다 많은 정보를 공유하고 싶다면 말이죠

이제 어떻게 하면 테두리나 색
그리고 각 칸의 크기 등

테이블의 모양을 바꿀 수 있는지 궁금할거에요

이러한 모든 것은 이미 여러분이 배웠거나 나중에 배울

CSS 속성값들(Properties)을 변경하는 것으로 바꿀 수 있어요

지금은 이 웹사이트를 조금 바꾸어서 여러분의 반려동물이나

여러분이 가지고 싶은 반려동물들의 페이지를 만들어보세요

데이터를 테이블로 만들어 보아요!