🌷 테이블 태그
테이블 태그는 말 그대로 html내에 테이블을 만들 수 있는 태그다.
기본적으로 <table>태그 안에
행(colum)의 개수대로 <tr>태그를 넣고 그 안에
칸(row)의 개수대로 <th> 또는 <tr>태그를 넣는다
💡 <table>
테이블 태그를 사용하여 테이블을 만들면 처음에는
테이블의 선이 보이지 않는다.
따로 style을 지정해주어야 보인다.
<head>부분에 <style>을 넣어 지정해줄 수도 있지만
일단은 간단하게 table태그 안에서 지정해보도록 하자.
<table border="1" cellpadding="10" cellspacing="0" align="center">
.
.
.
</table>- border : 선의 굵기, 선의 모양, 선의 색상을 결정하는 옵션이다.
- cellpadding : 선과 텍스트의 간격을 결정하는 옵션이다. 처음에 테이블을 만들면 텍스트와 선의 간격이 매우 좁아 가독성이 떨어지므로 간격을 적절히 띄우는 것이 좋다.
- cellspaceing : 칸과 칸 사이의 간격을 결정하는 옵션이다. 처음 테이블을 만들면 칸과 칸 사이가 조금 떨어져 있어서 일반적인 테이블의 모양과 다르게 나온다. 간격을 0으로 설정하는 것이 일반적이다.
💡 <tr>
테이블에서 table태그 안에 줄의 개수만큼 넣어준다.
5개를 넣으면 5줄이 생성된다.
💡 <td> 와 <th>
테이블의 tr태그 안에 칸의 개수만큼 넣어준다.
기본적으로는 td를 사용하지만 중요한 내용이라 가운데 정렬 & 자동으로 글씨가 굵게 되기를 원한다면 th태그를 사용하면 된다.
🥑 테이블 기본 모양
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>test1</title>
</head>
<body>
<h1>table 만들기</h1>
<hr>
<table border="1" cellpadding="10px" cellspacing="0" >
<tr>
<th>색상</th>
<th>수량</th>
</tr>
<tr>
<td>red</td>
<td>5개</td>
</tr>
<tr>
<td>blue</td>
<td>6개</td>
</tr>
</table>
</body>
</html><결과>
💡 따로 사용하면 좋은 옵션
다음 옵션들은 테이블 뿐만 아니라 여러태그 내에서 사용이 가능하다
align = "center"
사용시 가운데정렬을 해준다.
width = " "
" " 안에 크기를 넣으면 해당 요소의 너비가 결정된다.
height = " "
" " 안에 크기를 넣으면 해당 요소의 높이가 결정된다.
🌷 셀 합치기
테이블의 1칸을 셀이라고 한다.
이 셀을 가로로 합치려면 colspan="합치려는 셀의 개수"
세로로 합치려면 rowspan="합치려는 셀의 개수"
이렇게 td에 옵션을 걸어주면 된다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>test1</title>
</head>
<body>
<h1>table 만들기</h1>
<hr>
<table border="1" cellpadding="10px" cellspacing="0" >
<tr>
<th colspan="2">색상 및 수량</th>
<!--가로로 2칸을 합쳐 1칸을 만들겠다는 뜻!-->
<!--만약 rowspan="2"였다면 세로로 2칸이 합쳐져 1칸이 되었을 것이다-->
<!--합쳐져서 사용하지 않을 칸은 아예 적지 않는다-->
</tr>
<tr>
<td>red</td>
<td>5개</td>
</tr>
<tr>
<td>blue</td>
<td>6개</td>
</tr>
</table>
</body>
</html><결과>
기초부터 시작하는 감쟈 ※ 소개글 확인해주세요!! ※