<table> 태그와 요소들 정리

●해당 HTML 관련 글 들은 제가 알아보기 쉽게 메모장 형식으로 쓴 것이며, 실제 내용과 상이할 수 있으며, 제가 알아보기 쉽게 쓴 글로써, 읽으실 때 참고만 하시길 권장드립니다. 대부분의 내용은 생활코딩을 참고하였습니다. 출처를 밝힙니다.

1. <table>

표를 만들 수 있다.

 

 

 

2. <tr>

테이블 안에 행을 넣을 수 있다.

 

 

 

 

2-1. <td>

테이블 안에 데이터를 넣을 수 있다.

 

 

 

 

2-1-1. colspan

열을 늘릴 수 있다.

ex) <td colspan="2"> Out of Town </td>

열을 두 칸 늘렸다는 뜻이다.

 

 

2-1-2. rowspan

행을 늘릴 수 있다.

<td rowspan="2"> Out of Town </td>

2는 행을 두 칸 늘릴 수 있다는 뜻이다.

 

 

2-2. <th>

테이블 안에 header이다. 표제목을 넣을 수 있다.

 

 

2-2-1. scope

행과 열에 대한 정의를 내릴 수 있다.

한 마디로 무엇이 행인지 열인지 구분해주기 위한 속성이다.

row(행)와 col(열)로 정의를 내린다.

 

 

 

2-2-1-1. row

행의 값

ex) <th scope="row">Temperature</th>

 

 

 

2-2-1-2. col

열의 값

ex) <th scope="col">Sunday</th>

 

 

 

 

3. border

Table의 테두리를 만들어 준다.

ex) <table border="1"> 여기서 1은 테두리의 두께이다.

 

 

 

 

4. <tbody>

<Table> 코드 내부에 있는

body이다.

표 안에 데이터를 관할한다.

 

 

5. <thead>

<table> 코드에 head이다.

표에 표제를 넣을 수 있다.

 

 

 

 

6. <tfoot>

<table> 코드 안에 바닥글이다.

보통 표의 합계나, 차이 등 데이터의 결과를 나타낼 때

사용된다.

 

 

예시

 

이런 식으로 적게 되면(너무 대충 적어서 죄송합니다)

 

아래와 같이 표가 작성됩니다.

 

rowspan과 colspan으로 인해 행과 열이 병합하여,

 

보이 아래 데이터들이 밀려나

 

4가 밖으로 저렇게 밀려나는 것입니다.

 

이상으로 table 태그에 관한 이야기였습니다.

 

감사합니다!