HTML5 & CSS3 : table, tr, td 태그

2022.10.07.

• UI/UX 반응형 웹디자인&웹퍼블리셔 개발자 과정 - DAY 17

---

Review


코딩 수업에 들어가고부터는 내 스스로 긴장을 하기도 하고,
하루를 시작할 때 각오와 함께 시작한다고 해야하나 그런 것이 있었다.

오늘은 표를 만드는 법을 배웠는데, 어떤 분께서 선생님께 진도가 너무 빨라
따라가기 바쁘고 하나도 이해를 못하겠다고 말씀하셨다.
덕분에 속도가 느려지기도 했고 선생님께서 이론과 함께 천천히 알려주셔서
마음이 편해졌다.

나는 그런 말을 할 용기가 없었는데, 덕분에 부담없이 재미를 느끼면서 배우게
된 것 같아서 용기를 내주신 분께 감사하고 있다.

이번 달은 휴일이 많아서 일을 쉬는 날도 많아 그런 김에 고향으로 내려가
연휴 동안 밀린 공부를 해보려고 한다.
블로그도 작성하고 알차게 보내야지-

파이팅 !

---

 

• UI/UX 반응형 웹디자인&웹퍼블리셔 개발자 과정 - DAY 17

<table, tr, td 태그 개념 설명>

처음에 개념이 이해가 안 가서 선생님께 질문했더니,
table, tr, td 태그는border 값을 줄 때 모두 사각형이라고 생각하면 쉽다고 하셨다.

table은 전체 사각형의 테두리를 말하고,
tr은 가로 줄 한 줄의 사각형 테두리를 말하고,
td는 각각의 표의 사각형 테두리를 말하는 것이다.

처음에 border 값을 줄 때 나는 분명히 td 태그 (세로 줄)에 border 값을 줬는데 왜 모든 테두리에
다 선이 들어가지? 했는데 이제 갈피가 잡혔다.

 

 

table 값을 먼저 설정해보면 전체 표의 테두리가 들어간 것을 확인할 수 있다.

 

 

td 값을 설정하면 각각의 셀이 생긴 것을 볼 수 있다. 각 셀의 테두리가 설정된 것이다.

그러나 tr 값만 넣으면 아무런 변화가 생기지 않는다.

 

border-collapse: collapse 값을 설정하면 저렇게 셀 사이의 간격이 없어진다.
border-collapse: collapse 값을 먼저 설정하지 않으면 tr 태그에 border를 넣는 것이 의미가 없다.

 

 

table 태그에 border-collapse: collapse 값을 먼저 설정하고 나서
tr 태그에 border 값을 넣으면 위와 같이 가로 한 줄의 표마다 선이 들어간 것을 확인할 수 있다.

이제 완전히 이해 됐다 !!!!!!!!!!

 

 

td 태그에 border-top-color 값을 넣어주면 표의 맨 윗 줄의 셀 3개, 즉 사각형 3개의 윗 선에만
색이 들어간다.

---

 

 

- tr : 행
- td : 열

tr 태그와 td 태그를 이용해서 행 3개에 열 3개짜리 3개를 나열해봤다.
3줄 3칸짜리 표가 생성된 것이다.

 

border

style 태그에서 table 태그에 border 값을 넣었더니 위와 같이 변했다.

 

border-top

border 태그에는 border-top, border-bottom, border-left, border-right 등이 있다.
위의 이미지는 border-top으로 설정한 것이다.

 

td 값에 border를 주니 이런식으로 표처럼 되었다.
padding 값도 설정해서 안쪽에 여백을 넣어주었다.

border-collapse : collapse는 테이블 테두리 및 여백 속성을 지정해주는 방법이다.

table 태그에도 border-collapse를 collapse로 설정했더니 위와 같이 나타난다.

 

테두리의 색을 변하게 하려고 각각의 태그에 색을 설정해주었다.
td는 열이라서 td에 border-left와 border-bottom 값을 넣어줬고
table 에다가 border-top, border-right 값을 넣어줬다.

 

 

first-child, last-child로 설정하여 border 값을 설정할 수도 있다.

 

 

td 태그에 background-color를 설정했더니 배경색이 들어간 걸 확인할 수 있다.

 

td 태그 첫번째 셀1에다가 class 선택자를 이용해서
style 태그에서 background-color를 설정하면 특정 한 공간에만 색상이 들어간다.

 

 

이런식으로 색을 넣고 싶은 곳에 class 선택자를 이용해 background-color를 설정할 수 있다.

 

 

왼쪽과 오른쪽의 선만 제거하려면 td:first-child와 td:last-child의 border 값을 none으로 설정해주면 된다.

 

---

<셀 합치기 예제>

 

일단 표를 먼저 이런 식으로 만들어 놓고,

 

 

td 태그에 padding 값을 넣어줬더니 셀 각각에 여백이 생겼다.

 

 

- column : 행
- row : 열
- colspan : 행이 합쳐지는 것을 말한다.

td 태그에 colspan을 작성하고 합치는 행의 개수를 적으면 된다.
여기서는 2개를 하나로 합칠 것이기 때문에 2를 적었다.

 

 

- rowspan : 열을 합치는 것을 말한다.

위와 마찬가지로 2개의 열을 하나로 합칠 것이기 때문에 2라고 적어주었다.

 

색을 넣고 싶은 곳에 class 선택자를 이용하면 특정한 곳에 색을 넣을 수 있다.
class 선택자의 이름을 지정해주고 나서,
style 태그에서 선택자를 부를 때는 꼭 '.'을 작성해야한다. 띄어쓰기는 허용하지 않는다.

나같은 경우는 class 이름을 bg 라고 설정했기 때문에,
.bg 라고 적고 background-color를 설정해주니 위와 같이 옅은 회색이 들어간 것을 볼 수 있다.

---

<예제 실행>

 

위의 이미지처럼 웹에 구현하는 예제를 실행했다.

 

우선 가로 5칸, 세로 8칸인 표를 만든다.
border 값을 넣고, 셀의 여백을 주기 위해 padding 값도 넣어뒀다.

위의 .bg 태그는 무시해도 된다.

 

 

 

 

우선 셀을 합치기 위해 첫 줄에 colspan="5" 라고 작성하고,
가장 첫 줄의 가로 5칸을 합쳤다. 그러고 나서 '지역별 홍차' 라는 문구를 작성했다.

 

 

그 다음은 가로 2칸씩 합쳐야 하니, 각 tr 태그마다
td colspan="2" 라고 적어주고 문구를 적어줬다.

중국, 인도 및 스리랑카는 행과 열을 모두 합쳐야 하니
중국은 두번째 tr 태그로 가서 일단 rowspan을 적어주고 3칸을 합쳐야 하니 3이라고 작성했다.
인도는 네번째 tr 태그로 가서 rowspan 을 적어주고 4칸을 합쳐야 하니 4라고 작성했다.

 

td 태그에 text-align을 center로 설정해주니 가운데 정렬 되었다.

td의 색을 #ccc로 설정해주고 나서,

 

 

예제 완성

지역별 홍차, 중국, 인도 및 스리랑카 칸에 색을 넣어줘야 하기 때문에,
각각의 td 태그에 class 선택자를 이용해 이름은 bg 라고 설정해주었다.

style 태그에서 .bg 라고 부른 다음, background-color를 설정해주면 된다.

 

예제 진짜 완성

마지막으로 확인해보니 지역별 홍차, 중국, 인도 및 스리랑카 칸만 가운데 정렬이 되어 있길래
text-align을 .bg에 넣어주었다.

 

---

<예제>

대전광역시청 홈페이지에서 가져온 표를 그대로 만들어보려고 한다.

 

 

class 선택자를 이용해서 background-color도 설정해줬고, 열을 합치려고 rowspan도 작성했다.
여기까지는 쉬운 작업이었는데,

 

 

각각의 width 값을 설정하려니 class를 하나 더 만들어야 했다.
bg2라는 class를 더 만들어서 background-color와 text-align을 다시 설정해주었고,
굵은 글씨를 넣어야 하는 td 태그에 <b>태그도 각각 작성했다.

 

 

예제 완성

마지막으로 td 태그에서 font-size를 14px로 설정해주고,
border-top-color도 검정색으로 바꿔주니 완성되었다.

 

 

th태그는 표 위에 제목을 정해주는 태그인데,
'대전광역시청 대중교통' 이라는 문구를 넣어서 한번 만들어봤다.
행간 간격을 주고 싶어서 line-height 값도 설정했다. 완성 - !

 

---

<예제 실행>

 

 

일단 표를 만들고 거기에 맞는 문구를 넣어주었다.
그러고 나서 table 태그 위에 h1 태그로 제목을 넣어줬다.
h1 태그에 style을 설정해주었는데, background-color를 넣고 text-align, padding 값도 설정했다.

 

 

그러니 위와 같이 나타났다.
이미지가 표 안에 꽉차게 하고 싶은데 내가 td 태그에 padding 값을 설정해서 그런가보다.

 

 

td 태그에 padding 값을 빼고,
img 태그에 가로, 세로 너비를 설정했다.

 

 

그러니 위와 같이 이미지 크기가 변경 되었고, 안쪽 여백 또한 사라졌다.
그런데 여백이 없는 게 더 이상해서 다시 td 태그에 5px만 넣어줬다.

 

 

예제 완성

마지막으로 td 태그에 font-size와 color를 넣어 완성했다.

*이미지 출처
Instagram : @kokooma_