[TIL] html의 테이블 정리

러닝워터·2019년 9월 23일
0

TIL

목록 보기
1/7

테이블 태그

처음부터 끝까지 혼자 만드는 것을 목표로 삼기 때문에 html, css 등 많은 것들을 잘 다룰 수 있도록 노력은 하고 있지만 "이런 것들은 사용하지 않겠지.."하며 넘기는 것들이 있다. 테이블 태그도 사용할 일이 없을 줄 알았는데, 어드민 페이지를 만드는데 있어서 이 태그가 이렇게 중요할 줄이야.. 그래서 오늘은 테이블 태그를 다시 공부하고 정리해봤다.

이름나이성별
runnning3

기본적인 예시는 이렇다 . 마크다운으로 나타내고 해당 테이블을 코드로는 어떻게 작성하는 지를 적으면서 쉽게 알아보도록 하겠다.

기본적인 테이블 그리기

이름나이성별
runnning3
water7

html 작성하기

<table>
  <tr>
    <th>이름</th>
    <th>나이</th>
    <th>성별</th>
  </tr>
  <tr>
    <td>running</td>
    <td>3</td>
    <td></td>
  </tr>
  <tr>
    <td>water</td>
    <td>7</td>
    <td></td>
  </tr>
</table>

css 작성하기

table, th, td {
  border: 1px solid black;
  border-collapse: collapse;
}

간단히 설명하자면 테이블을 그리러면 table 태그로 감싸고, 각 열은 tr태그로 구분한다. 또 열의 제목은 th 태그로 표현해주면 된다

테이블 병합하기

이름

단순하게 이런 테이블이 있다고 생각해보자. 마크다운에서는 표현이 불가능한 것 같지만 실제 테이블 태그에서는 행이나 열을 병합해서 하나로 만들 수 있다. colspan이라는 속성과 rowspan이라는 속성을 이용하면 된다.

html 작성하기

<table>
  <tr>
    <td colspan=2>running</td>
  </tr>
  <tr>
    <td>ss </td>
    <td>dd </td>
  </tr>
</table>

코드 구성은 이렇고 td의 병합될 형태를 생각해서 td를 알맞게 맞춘다음 colspan이나 rowspan을 넣어주면 된다.

약간 헷갈릴수도 있는데 병합하려는 방향이 다른 열의 방향으로 이동한다면(테이블 가로 방향) colspan이고 다른 행의 방향으로 이동한다면(테이블의 세로 방향) rowspan이다.

profile
프로그래밍을 여행하는 히치하이커

0개의 댓글