IT/HTML&CSS

[HTML] 내부스타일시트방식_기초(2021-08-31)

기록자 꼬비 2021. 11. 8.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>표 - table</title>
  </head>
  <body>
    <!--
    caption -> 표 안에서 표제목 컨텐츠
    tr -> 표 행을 만듬
    td -> 행 안의 셀(분류되는 일반 내용 컨텐츠)
    th -> 행 안의 셀(분류하는 기준 컨텐츠)

    셀 병합 쉽게하는 순서
    1. 병합이 시작되는 셀을 찾는다.(html 방향성 좌->우, 위->아래)
    2. 가로병합은 colspan, 세로병합은 rowspan
    3. 병합이 되어지는 셀은 지운다.
    -->
    <table border="1" cellspacing="0">
      <caption>시간표(표제목)</caption><!--표를 병합할 때 헷갈리니깐 미리 표를 다 만든 뒤에 해라!-->
      <tr><!--데이터들의 기준이 되는 셀은 th(table header)태그를 사용-->
        <th>비교</th>
        <th>월</th>
        <th>화</th>
        <th>수</th>
        <th>목</th>
        <th>금</th>
      </tr><!--tr태그는 tablerow, td태그는 tabledata-->
      <tr><!--가로 병합은 colspan 속성+병합할 갯수(자신 포함한 갯수), 세로 병합은 rowspan 속성+병합할 갯수(자신 포함한 갯수)/중요한 것은 병합 당하는 셀들은 다시 꼭 지워줘야 함-->
        <th>오전</th>
        <td rowspan="2">출근</td>
        <td>휴무</td>
        <td rowspan="2">출근</td>
        <td colspan="2">휴무</td>
      </tr>
      <tr>
        <th>오후</th>
        <td>출근</td>
        <td>출근</td>
        <td>휴무</td>
      </tr>
    </table>
  </body>
</html>

저작자표시 비영리 (새창열림)

'IT > HTML&CSS' 카테고리의 다른 글

[HTML] form 양식폼 만들기(2021-09-09) (0)	2021.11.09
[html] 나무위키_예제(HTML 만들기)_기초(2021-09-07) (0)	2021.11.09
[HTML] 인라인스타일_기초(2021-08-31) (0)	2021.11.08
[HTML] 표만들기(Table)_예제_기초(2021-08-27) (0)	2021.11.08
[HTML] 표만들기(Table)_기초(2021-08-27) (0)	2021.11.08

[HTML] 내부스타일시트방식_기초(2021-08-31)

'IT > HTML&CSS' 카테고리의 다른 글

댓글

티스토리툴바