반응형
기본적으로 HTML에서 테이블을 생성하기 위해 테이블 태그를 사용합니다.
<body>
<table>
</table>
</body>
| tr | 표 내부 행 태그 |
| th | 행 내부의 제목 태그 |
| td | 행 내부의 일반 태그 |
<body>
<table>
<tr>
<th>제목1</th>
<th>제목2</th>
</tr>
<tr>
<td>내용1</td>
<td>내용2</td>
</tr>
</table>
</body>
| 제목1 | 제목2 |
|---|---|
| 내용1 | 내용2 |
형식으로 tr이라는 틀을 만들어 th와 td를 사용하여 내용을 넣어줄 수 있습니다.
하지만 테두리가 없기 때문에 테이블이라는 느낌이 안들죠
여기서 border라는 속성을 사용하여 선의 두께를 만들어줍니다.
<body>
<table border="1">
<tr>
<th>제목1</th>
<th>제목2</th>
</tr>
<tr>
<td>내용1</td>
<td>내용2</td>
</tr>
</table>
</body>
| 제목1 | 제목2 |
|---|---|
| 내용1 | 내용2 |
위에 처럼 선이 생성된것을 확인할 수 있습니다. 뭔가 테이블 처럼 보이네요
여기서 우린 조금더 다양한 속성을 사용하여 셀합치기를 배워보겠습니다.
rowspan과 colspan속성이 존재하는데요.
rowspan은 셀의 높이를 지정해주고 colspan은 셀의 너비를 지정해줍니다.
<body>
<table border="1">
<tr>
<th colspan="2">제목1</th>
</tr>
<tr>
<td rowspan="2">내용1</td>
<td>내용2</td>
</tr>
<tr>
<td>내용3</td>
</tr>
</table>
</body>
| 제목1 | |
|---|---|
| 내용1 | 내용2 |
| 내용3 | |
여기서 주의할 점은 각 자리수를 맞춰주지 않으면 테이블은 정상적으로 출력이 되지 않습니다.
만약, 내가 생각한 테이블 형식이 안만들어졌다? 자리수를 체크해보세요.
마지막으로 이대로 놔두면 너무 칩칩하기 때문에 색상을 입혀보도록 하겠습니다.
색상같은 경우는 style을 사용하여 background 또는 bgcolor로 입힐 수 있습니다.
<body>
<table border="1">
<tr>
<th colspan="2" style="background: red">제목1</th>
</tr>
<tr>
<td rowspan="2" bgcolor="skybule">내용1</td>
<td>내용2</td>
</tr>
<tr>
<td>내용3</td>
</tr>
</table>
</body>
| 제목1 | |
|---|---|
| 내용1 | 내용2 |
| 내용3 | |
반응형
'웹 공부' 카테고리의 다른 글
| [JavaScript(jQuery)] 클립보드 복사 (0) | 2023.10.13 |
|---|---|
| (HTML) Form 태그에 사용되는 기본 태그들을 알아보자! (0) | 2019.10.10 |
| (HTML) 테이블 글자 정렬에 대해 알아보자! (0) | 2019.09.27 |
| HTML 기본 용어 정리 (0) | 2019.06.26 |
| HTML Select 태그를 이용한 카테고리 박스 (0) | 2019.06.23 |