1. 표 만들기

• 표(table)는 웹 페이지에서 흔히 볼 수있는 2차원 격자 형태로 구성된 데이터이며 ➡︎행(row), ⬇︎열(column), 셀(cell)로 구성됨.

1-1. table 태그

<table><table/>

• form 태그처럼 html에서 표를 생성할 때는 table 태그 안에서 사용된다.

1-2. caption 태그

<table>
	<caption></caption>
<table/>

• 웹 접근성을 향상하는 방법중 하나로 표 제목을 지정하는 태그
• 표 제목은 caption 태그로 지정해야 하므로 무조건 caption 태그를 사용해야 함
• table 태그 안에서 제일 먼저 사용해야 할 태그

1-3. tr 태그

• tr(table row)태그는 표에서 행을 생성함.

1-4. th, td 태그

<table>
  <tr>
    <th>제목</th>
    <td>내용</td>
  </tr>
<table/>

<table>
  <caption> 라인프렌즈 캐릭터</caption>
  <tr>
    <th>번호</th>
    <th>이름</th>
  </tr>
  <tr>
    <td>1</td>
    <td>브라운</td>
  </tr>
  <tr>
    <td>2</td>
    <td>코니</td>
  </tr>
  <tr>
    <td>3</td>
    <td>셀리</td>
  </tr>
<table/>

• 실행 결과

라인프렌즈 캐릭터

번호	이름
1	브라운
2	코니
3	셀리

• th(table header)태그와 td(table data)태그는 표에서 열을 생성함.
• th 태그는 표에서 제목을 나타내는 열 생성
• td 태그는 표에서 일반적인 데이터를 나타내는 열 생성

1-5. rowspan, colspan 태그

<td rowspan="2"></td>
<td colspan="3"></td>

• 표에서 tr 태그 안에 th, td 태그를 사용하면 행과 열이 만나 셀을 생성한다, 생성된 셀은 병합할 수 있다.
• 행과 행을 병합할 때는 rowspan 속성을 사용함.
• 열과 열을 병합할 때는 colspan 속성을 사용함.
• rowspan, colspan의 속성값으로 병합하고 싶은 셀의 개수를 적고 비워두면 됨.

1-6. thead, tfoot, tbody 태그

• 표도 행을 묶어 그룹화 시킬수 있는데, thead, tfoot, tbody 태그를 사용하면 됨.
• thead 태그는 헤더 영억에 해당하는 행 그룹
• tfoot 태그는 푸터 영억에 해당하는 행 그룹
• tbody 태그는 본문 영억에 해당하는 행 그룹
• 사용을 원한다면 thead, tfoot, tbody 순서로 사용해야 함.
• thead와 tfoot 태그는 한번만 사용 가능하며 thead 태그로 그룹된 행은 th 태그 사용.
• 이 태그들을 사용하는 가장 큰 이유로는 웹 접근성이라고 함.

1-7. col과 colgroup 태그

• 표에서 열을 그룹화할 때는 col 태그와 colgroup 태그를 사용한다.
• col 태그는 하나의 열을 그룹화함.
• colgroup 태그는 span 속성과 함께 사용해 2개 이상의 열을 그룹화함
• 열 전체를 그룹화해서 통일된 스타일을 적용하는 목적.
• caption 태그를 사용하면 그 다음에 col과 colgroup 태그를 사용해야 하고 tr 태그보다 먼저 작성되야 한다.
• col과 colgroup 태그를 사용하면 반드시 두 태그의 개수와 사용한 열 개수가 일치해야함.

라인프렌즈 캐릭터

번호	제품 명	수량
1	브라운 젤펜	100
2	코니 젤펜	70
3	셀리 젤펜	36
4	레너드 젤펜	62

1-8. scope 속성

• 표를 생성할 때 사용할 수 있는 속성 중 단순하게 웹 접근성 향상을 목적으로 사용하는 scope 속성이 있다.
• scope 속성은 제목을 나타내는 셀의 범위를 지정함.
• 그래서 표 안에서 제목을 나타내는 th 태그에서만 사용가능.
• scope 속성을 사용하면 웹 접근성이 향상되며 속성 값으로는 col, colgroup, row가 있다.
• col은 열, row는 행을 뜻하고 colspan이나 rowspan으로 병합된 셀이라면 col이나 row 대신에 colgroup, rowgroup을 사용하면 됨.

1-9. 테이블 스타일링

table {
  border: 1px solid red; /* 표 전체의 테두리를 빨간색으로 */
}

th {
  border: 1px solid green; /* 제목 셀의 테두리를 초록색으로 */
}

td {
  border: 1px solid blue; /* 각 셀의 테두리를 파란색으로 */
}

• border 속성을 사용해서 테두리를 넣을 수 있다.
• 표 전체에 테두리를 넣고 싶으면 table 태그에 적용, 각 셀에 적용하고 싶으면 td 태그에 적용하면 됨.
• 테두리를 겹치고 싶으면 border-collapse: collapse; 를 추가하면 됨.
• 테두리 사이의 간격을 조절하고 싶으면 border-spacing: ?px; 를 추가하면 됨.