HTML | Table 만들기!

표 만들기

• 기준 : 가로줄

<tr> : table row

<th> : table header _ 표의 제목 셀

<td> : table data

<셀 병합>

• rowspan = '2' -> 2칸 병합 (가로 병합)

• colspan = '6' -> 6칸 병합(세로 병합)

• table head -> scope = 'col': 세로줄을 헤더 = 'row':가로줄을 헤더

<th rowspan='합칠 셀의 개수'>내용 </td>

<th rowspan='합칠 셀의 개수'>내용</th>

😊코드를 통해 알아보기!

   <table class="timtable">

      <caption>시간표</caption>
      <thead>
          <tr>
              <th scope="col">월</th>
              <th scope="col">화</th>
              <th scope="col">수</th>
              <th scope="col">목</th>
              <th scope="col">금</th>
              <th scope="col">토</th>
              <th scope="col">일</th>
          </tr>
      </thead>
      <tbody>
          <tr>
              <td colspan="2"></td>
              <td></td>
              <td></td>
              <td></td>
          </tr>
          <tr>
              <td colspan="5"></td>
          </tr>
          <tr>
              <td colspan="2"></td>
              <td></td>
              <td></td>
              <td></td>
          </tr>
          <tr>
              <td colspan="3"></td>
              <td></td>
              <td></td>
             
          </tr>
          <tr>
              <td colspan="2"></td>
              <td></td>
              <td></td>
              <td></td>
          </tr>
          <tr>
              <td colspan="2"></td>
              <td></td>
              <td></td>
              <td></td>
          </tr>
      </tbody>
  </table>
  

😊 출력

시간표

월	화	수	목	금	토	일
운동하기	휴식	독서	맥주마시기	놀러가기

---

<표에 제목 붙이기>

-figcaption 태그 : 표의 제목이나 설명 글 (중앙정렬 안됨)

-caption태그 : 중앙정렬

표의 구조

<thead> 표의 제목 부분

<tbody> 표의 본문 부분

<tfoot> 표의 요약 부분

-표의 구조를 정의하면 시각장애인들도 화면 낭독기를 통해 표의 구조를 쉽게 이해할 수 있고, css를 이용해 각각 다른 스타일을 적용 할 수 있다.