※ <table> 태그는 데이터를 포함하는 셀(cell)들의 행과 열로 구성된 2차원 테이블을 정의합니다.
테이블은 <table> 요소와 자식 요소인 하나 이상의 <tr>, <th>, <td> 요소들로 구성됩니다.
<tr> 요소는 테이블의 각 행(row), <th> 요소는 각 열의 제목, <td> 요소는 하나의 테이블 셀(cell)을 정의합니다.
또한, <caption>, <col>, <colgroup>, <thead>, <tfoot>, <tbody>과 같은 요소들을 사용하여 좀 더 복잡한 테이블을 정의할 수도 있습니다.
목차
1. 속성
@속성명 속성값설명
| table | table전체를 감싸는 태그 |
| caption | table의 제목이나 설명을 작성하는 태그. 테이블 가로폭의 가운데 오는 것이 기본 |
| tr | 테이블의 행을 의미하는 태그. 자손으로 th나 td가 반드시 있어야 한다. |
| th | 테이블의 제목 셀(칸)을 의미하는 태그. 부모인 tr안에 있어야 한다. css기본값은 글자가 굵게 처리되고 셀에서 가로 가운데 정렬. |
| td | 테이블의 일반 셀(칸)을 의미하는 태그. 부모인 tr안에 있어야 한다. css기본값: 왼쪽정렬 |
| align | left center right |
주변 텍스트에 따른 테이블의 정렬 방법을 명시함. |
|
| background-color bgcolor |
rgb(x,x,x) #xxxxxx 색상명 |
테이블의 배경색을 명시함. |
|
| border | 1 0 |
테이블의 레이아웃 용도로 사용되는 테두리를 사용할지 않을지를 명시함. |
|
| cellpadding | 픽셀 | 셀(cell)에서 콘텐츠와 셀 경계 사이의 공간을 명시함. |
|
| cellspacing | 픽셀 | 셀(cell)과 셀 사이의 공간을 명시함. |
|
| frame | void above below hsides lhs rhs vsides box border |
테이블에서 보이는 바깥쪽 테두리 부분을 명시함. |
|
| rules | none groups rows cols all |
테이블에서 보이는 안쪽 테두리 부분을 명시함. |
|
| summary | 텍스트 | 테이블 콘텐츠의 개요를 명시함. |
|
| width | 픽셀 % |
테이블의 너비를 명시함. |
| colspan | 같은 행의 칸들을 병합할 때 사용. ex) <td colspan="칸수"> |
| rowspan | 다른 행의 칸들을 병합할 때 사용. ex)<td rowspan="칸수"> |
| colgroup | 열을 그룹으로 묶을 수 있도록 해주는 태그 |
| col | colgroup의 자손으로 열단위를 나눌 수 있다. span속성을 사용하여 몇 열을 그룹으로 묶을지 설정 ex) <col span="3"> => 3열을 그룹으로 묶음 |
2. 기본 구조
@코드로 보기
<!DOCTYPE html>
<html lang="kr">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>board</title>
<style>
table {
border: 1px solid black;/* 표 테두리 (1px의 굵기 / 실선 / 검정색 )*/
border-collapse: collapse;/*테두리 1줄만 표시*/
}
th, td {
border: 1px solid black;
padding: 10px;/*셀 안쪽의 여백(패딩)*/
text-align: center;/*가운데 정렬*/
font-size: 10px;/*폰트 사이즈*/
}
th {
background-color: gray;/*th 열만 배경색 지정*/
}
</style>
</head>
<body>
<table>
<caption>테이블 만들기</caption> <!--테이블 이름-->
<tr> <!--첫번째 행-->
<th>제목1</th><!--첫번쨰 열 th를 사용하여 제목 셀로 지정-->
<th>제목2</th><!--두번쨰 열-->
<th>제목3</th><!--세번쨰 열-->
</tr>
<tr><!--두번째 행-->
<td>내용1</td>
<td>내용2</td>
<td>내용3</td>
</tr>
<tr><!--세번째 행-->
<td>내용4</td>
<td>내용5</td>
<td bgcolor="gray">내용6</td> <!--인라인 스타일로 직접 스타일 적용-->
</tr>
</table>
</body>
</html>
@결과
위에 같이 기본적으로는 <style></style> 탭 내에 테이블에 대한 기본 속성 값을 지정하여 주고 , <body></body> 탭에서는 테이블의 구조와 내용만 작성하는 형식을 주로 사용하며 '내용 6' 셀과 같이 인라인 스타일로 직접 속성값을 지정하여 주는 방식도 있습니다. CSS파일로 속성 값들을 따로 관리하는 방법은 나중에 따로 정리하도록 하겠습니다.
<style></style> 탭의 속성값들은 '1. 속성'에 정리해 놓은 속성 값 외에도 폰트사이즈나 컬러 등 기본적인 속성 값들도 지정하고 셀 내용은 텍스트뿐만 아니라 이미지나 링크 등도 삽입하여 사용할 수 있습니다.
'HTML' 카테고리의 다른 글
| 비주얼스튜디오 코드(Visual Studio Code)의 하이퍼링크 (0) | 2023.02.19 |
|---|---|
| 비주얼스튜디오 코드(Visual Studio Code)의 LIST (0) | 2023.02.18 |
| 비주얼스튜디오 코드(Visual Studio Code)의 기본코드 (0) | 2023.02.16 |
| 비주얼스튜디오 코드(Visual Studio Code) 설정 및 단축키 모음 (0) | 2023.02.15 |
| 비주얼스튜디오 코드(Visual Studio Code) 다운로드 및 설치방법 (0) | 2023.02.15 |