-
HTML - <table>태그HTML/HTML 2020. 3. 2. 01:58
오늘은 <table> 태그에 대해서 알아보자!
<table> 태그란?
→ 표를 만드는 방법을 의미하며, HTML 태그 중에서 가장 복잡하고 이해하기 어려운 태그라고 할 수 있다.
테이블을 사용 할때, 값을 넣으려고 하면 어떤 특정한 태그로 묶어 줘야 한다.
그때 사용하는 태그가 바로 <td> 태그이다.
<td> 태그의 약자는 table data를 의미한다.<td>이름</td> <td>성별</td> <td>주소</td>즉, 항목 하나하나를 td라는 이름으로 묶어주며, 표에서 각각의 실제 데이터들을 의미한다는 뜻이다.
그러고 나서, 각각의 행들을 <tr> 태그로 묶어 줘야 한다.
<tr> 태그의 약자는 table row를 의미한다.
즉, 같은 행에 속하는 <td> 태그들을 <tr>이라는 태그로 묶어주면, 웹 브라우저는 <tr>태그 아래에 있는 <td>태그들을 같은 행으로 표시한다.
하지만, 행과 열이 나뉘었지만 명확한 표시를 원한다.
그럴 때, table의 border라는 속성이 존재한다.
속성에 값을 주면, 명확한 table의 모습을 볼 수 있다.
만약 테두리를 이쁘게 꾸미고 싶다면, CSS를 이용해서 꾸며야 한다.그렇게 해서 완성된 코드와 결과를 확인해보자.
<html> <head><meta charset="utf-8"></head> <body> <table border="2"> <tr> <td>이름</td> <td>성별</td> <td>주소</td> </tr> <tr> <td>최진혁</td> <td>남</td> <td >청주</td> </tr> <tr> <td>최유빈</td> <td>여</td> <td>청주</td> </tr> </table> </body> </html>
자 보시는 것처럼 우리가 테이블을 만들 때의 순서는
1. 전체를 table이라는 태그로 묶어주고,
2. 하나의 행은 tr태그로 묶어주고
3. 하나의 열(한 칸)은 td태그로 묶어준다.추가로 테이블을 조정하는 방법을 알아보자.
기본 코드에서 이렇게 수직으로 합치고 수평으로 합칠 수 있는 방법이 있다.
rowspan을 이용해 수직으로 병합하는 방법!
-> rowspan이라는 속성을 사용(행이 병합)해서 행을 병합할 때, rowspan에다가 숫자를 적어놓고 그 적어준 숫자만큼 아래쪽에 있는 행들에서 td태그를 지워줘야 한다.
colspan을 이용해 수평으로 병합하는 방법!-> colspan이라는 속성을 사용(열 병합)해서 열을 병합할 때, colspan을 쓰면서 (적어준 숫자 - 1) 만큼의 태그를 삭제하면 된다.
<html> <head><meta charset="utf-8"></head> <body> <table border="2"> <tr> <th>이름</th> <th>성별</th> <th>주소</th> <th>회비</th> </tr> <tr> <td>최진혁</td> <td>남</td> <td rowspan="2">청주</td> <td>1000</td> </tr> <tr> <td>최유빈</td> <td>여</td> <td>500</td> </tr> <tr> <td colspan="3">합계</td> <td>1500</td> </tr> </table> </body> </html>'HTML > HTML' 카테고리의 다른 글
HTML - <form> 태그 (0) 2020.03.04 HTML - img태그 (0) 2020.02.29 HTML - <p>태그 / <br>태그 (0) 2020.02.26 HTML - <ul> 태그 / <ol>태그 (0) 2020.02.25 HTML - <a>태그와 속성 (0) 2020.02.24