[TIL / HTML] table

Changyun Go·2021년 12월 7일
JavaScriptTILhtml
0
post-thumbnail

[TIL / HTML] table

table

  • 표를 만들어주는 HTML 태그다.

구성 요소

  • <table> ⇒ <th> ⇒ <tr> ⇒ <td> 순서로 구성된다.

<table>

  • 테이블을 만드는 태그다.

<th>

  • 테이블의 헤더부분을 만드는 태그다.
  • 굵은 글씨체에 가운데 정렬이 기본값이다.
  • 잘 사용하지 않는다. → 태그로 대체한다.

<tr>

  • 테이블의 행을 만드는 태그다.

<td>

  • 테이블의 열을 만드는 태그다.
<body>
    <table border="1">
	<th>테이블</th>
	<th>만들기</th>
	<tr><!-- 첫번째 줄 시작 -->
	    <td>첫번째 칸</td>
	    <td>두번째 칸</td>
	</tr><!-- 첫번째 줄 끝 -->
	<tr><!-- 두번째 줄 시작 -->
	    <td>첫번째 칸</td>
	    <td>두번째 칸</td>
	</tr><!-- 두번째 줄 끝 -->
    </table>
</body>

셀 병합

colspan

  • 가로 셀을 병합하는 속성이다. → 정보를 세로(column)로 읽기 위해서 가로 셀이 병합된다.
  • colspan의 value만큼 셀이 병합된다.
<td colspan="3">옆으로 세칸</td>

rowspan

  • 세로 셀을 병합하는 속성이다. → 정보를 가로(row)로 읽기 위해서 세로 셀이 병합된다.
  • rowspan의 value만큼 셀이 병합된다.
<td rowspan="3">아래로 세칸</td>

tr, td 갯수 확인

  • length 속성을 이용하여 테이블의 tr, td 갯수를 가져올 수 있다.

tr 갯수(테이블 행 갯수)

테이블 요소.rows.length; // 테이블 행 갯수

td 갯수(테이블 열 갯수)

테이블 요소.cells.length; // 테이블 열 갯수

tr, td에 접근

  • 2차원 배열과 유사한 방식으로 테이블의 tr, td에 접근할 수 있다.
// 테이블의 0번 rows, 1번 cells에 들어있는 텍스트
테이블 요소.rows[0].cells[1].innerText;

P.S.

✍️ 달력을 만드는 미니프로젝트를 하면서 table에 대해 찾아보게 되었다. 데이터를 단순 나열하는 게 아니라 체계를 갖고 표현할 수 있다는 점이 좋은 것 같다😀

참고 문서

profile
Changyun Go
이전 포스트

[프로그래머스] 음양 더하기

다음 포스트

[TIL / CSS] vh와 vw

0개의 댓글