반응형
이번에 알아볼 기본 태그는 <table> 태그입니다. 표를 만드는 대표적인 태그로 <th>, <tr>과 <td> 태그를 이용해서 표의 행과 열, 너비/높이 등을 설정할 수 있습니다. 각 각의 태그가 어떤 역할을 하고, 어떤 구조로 표가 만들어지는에 대해서 알아보겠습니다.
기본 구조
표를 만드는 태그의 기본 구조입니다. <tr> 태그는 행, <th>, <td> 태그는 열을 정의하는 태그입니다.
<!doctype html> <html> <head> <meta charset="utf-8"> <title>테이블 태그에 대해서 알아보기</title> </head> <body> <table> <tr> <th>표 제목1</th> <th>표 제목2</th> </tr> <tr> <td>표 내용1</td> <td>표 내용2</td> </tr> </table> </body> </html>
표는 어디 간 거지?
위의 코드를 실행해보면 실제로 표는 온데간데없고, 글자만 두둥실 떠다니는 것을 볼 수 있습니다. 이상한 게 아니고 정상입니다! 표의 테두리를 설정해주기 위해선 <style> 태그를 사용해야 합니다. <style> 태그를 이용하면 시각적으로 다양한 기능을 사용할 수 있습니다. 이번 포스팅에서는 가볍게 표의 테두리를 설정하는 방법만 알고 넘어가겠습니다.
<!doctype html> <html> <head> <meta charset="utf-8"> <title>테이블 태그에 대해서 알아보기</title> <style> table {border:1px solid black;} td,tr,th {border:1px solid red; padding:1px;} </style> </head>
태그명 {테두리 두께 선 종류 선 색깔}
'<body> 속성에 들어가는 <table> 태그는 전부 다 검은색(black) 실선(solid) 두께 (border)가 1px인 테두리로 설정하겠다' 라는 의미입니다.
유동적인 모양의 표를 만들고 싶어요.
위와 같은 표의 형태를 만들어보겠습니다. 우선 표의 너비와 높이를 마음대로 바꾸기 위해서는 colspan 과 rowspan을 사용해야 합니다. colspan은 열, rowspan은 행의 크기를 설정할 수 있습니다.
<!doctype html> <html> <head> <meta charset="utf-8"> <title>테이블 태그에 대해서 알아보기</title> <style> table {border:1px solid #aaa; width: 500px; height: 200px; text-align: center;} td,tr,th {border:1px solid red; padding:1px;} </style> </head> <body> <table> <tr> <th colspan="4">A</th> </tr> <tr> <td rowspan="3">B</td> <td rowspan="2">C</td> <td>D</td> <td>E</td> </tr> <tr> <td>F</td> <td>G</td> </tr> <tr> <td colspan="2">H</td> <td>I</td> </tr> </table> </body> </html>
반응형
'웹 디자인 > HTML · CSS' 카테고리의 다른 글
| [HTML·CSS] div태그로 화면 공간 분할하기 (0) | 2022.10.05 |
|---|---|
| [HTML/CSS] <video> 태그로 간단한 동영상 설정하기(iframe 태그) (1) | 2021.12.18 |
| [HTML/CSS] a 태그와 이미지 태그 사용해보기 (map 태그) (0) | 2021.12.16 |
| [HTML/CSS] 기본적인 글꼴 태그 알아보기 (0) | 2021.12.08 |
| [HTML/CSS] 필수 태그와 주석 처리 알아보기 (html, head, body 등) (0) | 2021.12.07 |