<table> : 표 만드는 시작과 끝에 들어가면 됨.
<table border=숫자> : 표에 숫자만큼의 픽셀 굵기의 선 만들어 주기.
<tr> : table row. 한 행마다 들어가는 내용을 <th>와 <td>로 적기.
<th>내용적기 </th> : table head. 행의 제목. 자동으로 굵게, 가운데 정렬로 표시된다.
<td>내용적기 </td> : table data. 셀의 내용.
</tr> : 한 행에 들어가는 거 닫기.
</table> : 표 하나 완성.
width="넓이값" : 넓이값에 숫자를 기입하면 그 숫자의 픽셀만큼 넓이가 설정됨. 코드 안에 함께 넣어야 함.
height="높이값" : 높이값에 숫자를 기입하면 그 숫자의 픽셀만큼 높이가 설정됨. 코드 안에 함께 넣어야 함.
<caption> : 표의 제목. 대신 반드시 table 코드 아래에 위치시켜야 함.
</caption> : 캡션 코드 닫기
<colgroup> : column group. 열 스타일 지정
<col style="width:숫자px"> : column style. 각 열에 스타일 지정해주기. width를 넣으면 열 별로 넓이 지정.
<col width="숫자"> : 위의 것과 같은 의미.
</colgroup> : 열 스타일 지정 완료
<코드 col span="숫자"> : column span. 해당 셀과 옆의 셀들을 합치기.(숫자만큼의 셀이 합쳐짐)
(ex. <td colsapn="3"></td> 해당 셀부터 오른쪽으로 총 3개의 셀이 합쳐짐)
<코드 col div="숫자"> : column divide. 해당 셀을 숫자만큼 나누기.
(ex. <td coldiv="3"></td> 해당 셀이 3개로 나뉘어짐)
align="정렬" : text 정렬. right(오른쪽 정렬), left(왼쪽 정렬), center(가운데 정렬). 코드 안에 함께 넣어야 함.
Example 1
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>SNS이용률</title>
</head>
<body>
<table border=1>
<caption><b>주요 SNS 서비스별 이용률(%)
</b></caption>
<colgroup>
<col width="120">
<col width="120">
<col width="120">
<col width="120">
<col width="120">
<col width="120">
</colgroup>
<tr>
<th></th>
<th>페이스북</th>
<th>카카오스토리</th>
<th>밴드</th>
<th>인스타그램</th>
<th>트위터</th>
</tr>
<tr>
<th>2015년</th>
<td>77.1</td>
<td>58.3</td>
<td>32.4</td>
<td>16.7</td>
<td>22.1</td>
</tr>
<tr>
<th>2016년</th>
<td>73.8</td>
<td>51.0</td>
<td>40.1</td>
<td>28.1</td>
<td>14.7</td>
</tr>
</body>
</html>
Example 2
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title> 테이블 만들기 </title>
</head>
<body>
<table border="1" height="530">
<colgroup>
<col style="width:100px">
<col style="width:100px">
<col style="width:100px">
<col style="width:100px">
<col style="width:100px">
<col style="width:100px">
<col style="width:100px">
</colgroup>
<tr height="30">
<th>Sun</th>
<th>Mon</th>
<th>Tue</th>
<th>Wed</th>
<th>Thu</th>
<th>Fri</th>
<th>Sat</th>
</tr>
<tr>
<td col span="6"></td>
<td>1</td>
</tr>
<tr>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
</tr>
<tr>
<td>9</td>
<td>10</td>
<td>11</td>
<td>12</td>
<td>13</td>
<td>14</td>
<td>15</td>
</tr>
<tr>
<td>16</td>
<td>17</td>
<td>18</td>
<td>19</td>
<td>20</td>
<td>21</td>
<td>22</td>
</tr>
<tr>
<td>23</td>
<td>24</td>
<td>25</td>
<td>26</td>
<td>27</td>
<td>28</td>
<td>29</td>
</tr>
<tr>
<td>30</td>
<td col span="6"></td>
</tr>
</table>
</body>
</html>
TIP. 코딩 레퍼런스 묶음으로 공부하기
HTML Reference
www.w3schools.com
'html+CSS+JS > html+CSS' 카테고리의 다른 글
| [html/기초] 체크상자, 기입란 만들기 (input, form, fieldset, legend) (0) | 2019.06.19 |
|---|---|
| [html/기초] 이미지나 문구에 링크 걸기 (a href, target, blank, id) (1) | 2019.06.18 |
| [html/기초] 이미지 관리 (img src, figure, figcaption) (0) | 2019.06.18 |
| [html/기초] 항목나열 (0) | 2019.06.17 |
| [html/기초] html 시작, 나눔선, 글자 효과 (0) | 2019.06.17 |
