반응형 홈페이지 제작의 기초 3-1 (html table)

홈페이지를 제작하는 것은 건축물을 생각하면 이해하기가 쉽습니다.

먼저 토지를 다듬어 건축물을 올릴 장소를 마련한 후, 건축물의 뼈대를 만들고, 전기의 배선 및 수도공사 등 과 인테리어를 끝낸 후 건축을 마무리하게 됩니다. 그 중 뼈대를 만드는 부분이 홈페이지 제작에 있어서는 마크업이라고 부릅니다.

마크업의 대표적 해당 요소는 

홈페이지를 구성하는 레이아웃 마크업.(html+css)
영역을 구분 짓는 블록,인라인 마크업,(html+css)
표와 폼 양식을 만드는 테이블, 폼 마크업, (html)
글을 게시하는 텍스트 마크업, (html) 으로 크게 4종류를 들 수 있습니다.

세 번째 첫번째 테마 테이블,표 만들기입니다.

홈페이지에서 기존에 가지고 있는 정보들을 차례대로 보기 쉽게 나열하거나 정렬이 필요할 때, 또는 도표의 형태로 만들어 정보를 나열하게 되는 테이블(table)과 주문서와 회원가입 등, 정보를 입력하기 위해 만들어야 하는 폼(form) 양식에 대해 알아보겠습니다.

TABLE

html에 대해 코딩할 때 제일 헷갈리는 테이블(표) 태그입니다. 테이블은 태그로 시작과 끝을 알릴 수 있으며, 행과 열로 이루어져 있는 태그는 각각 행 태그, 행 제목, 열 태그로 나뉠 수 있습니다. 그리고 주의하셔야 할 점은 행 태그를 만들었다면 열 태그로 채워주셔야 합니다.

가령 3x4의 위와 같은 표를 홈페이지에 집어넣고 싶다면 어떻게 표기해야 할까요?

일단, 태그를 열고 닫는 것부터 시작해야겠죠? 테이블 태그가 시작되는 것은 곧 표가 만들어진다는 것을 알리는 문장과 같습니다. 표를 만들기 위한 사각형 테두리라고 생각하시면 될 것 같네요

<table>
.
.
</table>

그 다음 제목 부분을 채워 주어야겠죠 태그로 행을 만들어 준 뒤, 행 제목인 코드를 만든 후 제목을 넣어줍니다.

<table>
  <tr>
   <th>순번1</th>
   <th>순번2</th>
   <th>순번3</th>
  </tr>
</table>

▲ 위와 같은 코드로 표를 만들어 결과 값을 확인하면 바로 밑의 표와 같은 형식의 도표가 만들어집니다.

네 맞습니다.

table코드는 순전히 코드의 역할을 할 뿐, 코디네이터인 CSS를 추가해 코드로 모양을 입혀야지만 완벽하고 예쁜 표가 만들어집니다.

<style>
table, th, td {
    border: 1px solid black;
    border-collapse: collapse;
}
</style>
<table>
  <tr>
   <th>순번1</th>
   <th>순번2</th>
   <th>순번3</th>
  </tr>
</table>

▲ 위와 같이 스타일 style 태그를 통해 선: border 값을 주어야 테두리 선 이 만들어집니다. 하지만 표를 제작할 때는 또 하나의 스타일 태그를 입력해야 하는데요 바로

border-collapse: collapse;입니다.

위의 태그는 표에 스타일로 선(border) 값을 주게 되면 테두리가 두 줄의 형태로 겉을 이루는 선이 이쁘지 않은 모습을 나타내게 되는데, 그때의 두 줄 선을 한 줄로 만들어 주는 태그입니다. 사전 용어로 collapse를 찾아보면 "붕괴하다"라는 뜻을 가지고 있는데, 뭐.. "선을 붕괴하다"라는 의미로 알 수 있겠네요 반응형으로 테이블이 늘어났다. 줄어들었다 하려면 width: 100%; 값을 스타일에 추가해 주면 되겠죠? 그리고 표를 좀 더 잘 보이게 하기 위해 패딩값도 15px정도 주겠습니다.

※ 스타일에 쓰인 CSS용어는 관련 포스팅을 함과 동시에 링크 처리 해놓겠습니다 :-)

헤깔리시는 분을 위해 막간 정리를 해보자면

<table></table> 태그를 선언해 표가 만들어 진다는걸 컴퓨터한테 알린다.
<tr><th>태그를 안쪽에 선언해 행과 열을 만든다.
<style></style>태그를 통해 이쁜 선을 만들 예정이라는걸 컴퓨터한테 알린다.
표를 만들면 두 줄로 만들어지는데, border-collapse: collapse; 태그를 통해 한줄로 만들어준다.
반응형을 적용하기위해 width: 100%; 선언해준다.
패딩값을 적용해 표의 선과 글씨사이에 공간감을 준다.(이쁘게 보이려고)

대충 적용 스토리는 이러합니다. 위 6개만 적용 해 주셔도 뭐.. 표 만들기는 끝났다고 봐도 무방합니다. 나머지는 행과 열, 합치기 정도?? 밖에 남지 않았네요.

<!DOCTYPE html>
<html>
<head>
<style>
table,th, td {
    border: 1px solid black;
    border-collapse: collapse;
    padding: 15px;   
}
table {
	width:100%;
}
</style>
</head>
<body>

<table>
  <tr>
    <th>순번1</th>
    <th>순번2</th> 
    <th>순번3</th>
  </tr>
  <tr>
    <td>1-1</td>
    <td>1-2</td>
    <td>1-3</td>
  </tr>
  <tr>
    <td>2-1</td>
    <td>2-2</td>
    <td>2-3</td>
  </tr>
  <tr>
    <td>3-1</td>
    <td>3-2</td>
    <td>3-3</td>
  </tr>
</table>

</body>
</html>

▲ 좀 더 보기 쉽게 CSS와 행 tr과 열 td 를 통해 표를 좀 더 추가해 주었습니다..

그럼 여기서 궁금증이 생깁니다.

1. 꼭 태그를 다 넣어야 하나요?

가운데 있는 행 tr 태그를 지워보겠습니다.(1-1 부분이에요)

<!DOCTYPE html>
<html>
<head>
<style>
table,th, td {
    border: 1px solid black;
    border-collapse: collapse;
    padding: 15px;   
}
table {
	width:100%;
}
</style>
</head>
<body>

<table>
  <tr>
    <th>순번1</th>
    <th>순번2</th> 
    <th>순번3</th>
  </tr>

    <td>1-1</td>
    <td>1-2</td>
    <td>1-3</td>

  <tr>
    <td>2-1</td>
    <td>2-2</td>
    <td>2-3</td>
  </tr>
  <tr>
    <td>3-1</td>
    <td>3-2</td>
    <td>3-3</td>
  </tr>
</table>

</body>
</html>

순번1	순번2	순번3
1-1	1-2	1-3
2-1	2-2	2-3
3-1	3-2	3-3

▲ 두 번째 줄의 행 tr 태그를 지운 모습입니다. 변화가 없는 건 위 아래 행 tr 이 해당 열 td 를 잡아 주고 있기 때문입니다. 그럼 아래것도 지워볼께요 2-1행 부분입니다.

<!DOCTYPE html>
<html>
<head>
<style>
table,th, td {
    border: 1px solid black;
    border-collapse: collapse;
    padding: 15px;   
}
table {
	width:100%;
}
</style>
</head>
<body>

<table>
  <tr>
    <th>순번1</th>
    <th>순번2</th> 
    <th>순번3</th>
  </tr>

    <td>1-1</td>
    <td>1-2</td>
    <td>1-3</td>


    <td>2-1</td>
    <td>2-2</td>
    <td>2-3</td>

  <tr>
    <td>3-1</td>
    <td>3-2</td>
    <td>3-3</td>
  </tr>
</table>

</body>
</html>

순번1	순번2	순번3
1-1	1-2	1-3	2-1	2-2	2-3
3-1	3-2	3-3

▲ 두 번째와 세 번째 줄의 행 tr 태그를 지운 모습입니다. 위는 변화가 없지만 아래 행이 삭제되어 틀을 잃어버렸기 때문에 1번과 2번 줄이 붙어버린 모습이네요.

※ 이로써 알 수 있는 건 행 tr 으로 기준점을 잡아 열 td 을 넣는 방식으로 생각하면 되겠습니다. 마치 달걀판을 만들어 달걀을 넣는 것과 비슷한 원리입니다.

2. 제목 태그 th 말고 열 때 열 td 로 사용해서 CSS 처리하면 안 되나요?

위와 같은 질문에는 정답은 없습니다. 본인이 하고 싶은 대로 제목 태그 th 대신 td 를 사용해 css 처리해도 무방합니다. 다만 제목태그 th 를 사용하는 것에 대한 이점은 있습니다.

- 웹 표준 준수 / - 폰트 굵기 효과 / - 가운데 정렬 / - 유지 보수 사용하려는 정의에 대한 확실한 태그만 지정해 주신다면 웹 표준을 준수하신 게 됩니다. 그리고 제목이 안 들어간 표만 넣으신다고 하면 행 tr 열 td 만 사용해서 꾸미시면 되겠죠?

표의 행과 열을 합치는 방법

colspan(가로) / rowspan(세로)

엑셀을 사용하다 보면 두 칸을 한 칸의 영역으로 가로, 또는 세로로 합치는 경우가 생기는데요 이 때에는 기존의 열 태그영역에 스타일처럼 입력해서 사용하시면 되고, 합치고 싶은 영역만큼 숫자로 입력해 주시면 됩니다.

<td colspan="2"> 해당 영역과 그 옆의 가로 영역 두 군데를 합친다.
<td rowspan="2"> 해당 영역과 그 아래의 세로 영역 두 군데를 합친다.

예시를 볼까요?

<!DOCTYPE html>
<html>
<head>
<style>
table,th, td {
    border: 1px solid black;
    border-collapse: collapse;
    padding: 15px;   
}
table {
	width:100%;
}
</style>
</head>
<body>

<table>
  <tr>
    <th>순번1</th>
    <th>순번2</th> 
    <th>순번3</th>
  </tr>

    <td>1-1</td>
    <td colspan="2">1-2</td>
    <td>1-3</td>

  <tr>
    <td>2-1</td>
    <td rowspan="2">2-2</td>
    <td>2-3</td>
  </tr>
  <tr>
    <td>3-1</td>
    <td>3-2</td>
    <td>3-3</td>
  </tr>
</table>

</body>
</html>

예시로 썼던 기본 코드에 1-2는 colspan을 2-2는 rowspan을 적용한 모습입니다. 영역이 늘어난 만큼 기존 영역을 하나씩 빼주어야 정상 작동하겠죠? 기존 표에 작업하실 때에는 합친다는 생각보다 적은 숫자만큼 칸이 늘어난다고 생각하시는 게 좋습니다.

※ 제목 영역을 써주는 <caption></caption>과 id값등은 모두 html코드이기 때문에 적용됩니다 😀

표(table)에 대한 포스팅은 이 정도로 마치고 , 폼(form)에 대한 포스팅은 다음편에 이어가도록 하겠습니다

본문 출처: https://www.w3schools.com

저작자표시 비영리 변경금지

'Design > 퍼블리싱 지식창고' 카테고리의 다른 글

반응형 홈페이지의 제작의 기초 4 (text) (0)	2022.12.14
반응형 홈페이지의 제작의 기초 3-2 (form & fieldset & input) (0)	2022.12.14
반응형 홈페이지 제작의 기초2 (block, inline) (0)	2022.12.14
반응형 홈페이지 제작의 기초1 (layout) (0)	2022.12.13
절대경로와 상대경로 (0)	2022.12.13

블루씰 디자인

반응형 홈페이지 제작의 기초 3-1 (html table)

TABLE

표의 행과 열을 합치는 방법

colspan(가로) / rowspan(세로)

'Design > 퍼블리싱 지식창고' 카테고리의 다른 글

티스토리툴바

반응형 홈페이지 제작의 기초 3-1 (html table)

TABLE

표의 행과 열을 합치는 방법

colspan(가로) / rowspan(세로)

'Design > 퍼블리싱 지식창고' 카테고리의 다른 글

'Design/퍼블리싱 지식창고' Related Articles

티스토리툴바