[1일 1코딩] 코딩독학 HTML 테이블 feat. tcpschool
오늘은 HTML 테이블!
실습해본거 옮겨적기...
tcpschool 사이트에서 보면서
창 두개 띄워 놓고
바로 바로 베끼면서 코딩실습하는중
HTML 테이블 (Table)
테이블 :
여러 종류의 데이터를 보기 좋게 정리해서 보여주는 표
<table> 태그 사용
<tr> 태그 : 테이블에서 열 구분
<th> 태그 : 각 열의 제목, 모든 내용은 자동으로 굵은 글씨에 가운데 정렬됨
<td> 태그 : 테이블의 열을 각각의 셀(cell)로 나눠줌
<body>
<h1>테이블 만들기</h1>
<table style="width:80%">
<tr style="background-color:hotpink">
<th style="color:white">1</th>
<th style="color:white">th 부분</th>
<th style="color:white">th 부분</th>
</tr>
<tr style="background-color:lightpink">
<td style="text-align:center">2</td>
<td style="text-align:center">td 부분</td>
<td style="text-align:center">td 부분</td>
</tr>
<tr style="background-color:beige">
<td style="text-align:center">3</td>
<td style="text-align:center">td 부분</td>
<td style="text-align:center">td 부분</td>
</tr>
</table>
</body>
>>결과
<tr>태그가 열을 구분해주는데
<tr>태그에 색을 입히면 세로로 색이 입혀지는게 아니라
가로로 입혀져서 왜 그렇지?하고 생각해보다가
구글링해보니깐
row number가 왼쪽 숫자로 표시해둔 1,2,3을 의미함
그러니까 첫번째 가로 행들은 모두 열번호 1번에 속함
그 다음은 열번호 2번...
그래서 <tr>태그로 했을 때 세로가 아닌 가로로 내용작성이 됨
옛날에 엑셀공부할 때도 맨날 헷갈렸었음ㅠㅠㅠㅋㅋㅋ
계속 생각해봐도 헷갈린다
그냥 외우는게 낫겠다 ^^...
CSS의 border 속성 : 테이블의 테두리 표현 가능
따로 명시하지 않으면 빈 테두리.
border 속성을 쓰면 테두리가 두줄씩 나옴.
한줄로 설정하려면 border-collapse 속성을 사용해야함.
<head>
<meta charset="UTF-8">
<title>HTML Tables</title>
<style>
table, th, td { border: 1px dashed blue ; border-collapse: collapse }
</style>
</head>
<body>
<h4 style = "color : hotpink">Border Collapse : 겹테두리 없애기</h4>
<table style="width:100%">
<tr style="background-color:lightblue">
<th>참치</th>
<th>고래</th>
<th>날치</th>
</tr>
<tr>
<td>상어</td>
<td>문어</td>
<td>꽁치</td>
</tr>
<tr>
<td>오징어</td>
<td>고등어</td>
<td>돌고래</td>
</tr>
</table>
</body>
>> 결과
테이블의 열(column) 합치기 : colspan 속성
테이블의 행(row) 합치기 : rowspan 속성
<head>
<meta charset="UTF-8">
<title>HTML Tables</title>
<style>
table, th, td {border: 1px solid green; border-collapse: collapse }
</style>
</head>
<body>
<h4 style="color:limegreen">테이블의 행 합치기</h4>
<table style="width:80%">
<tr>
<th>참치</th>
<th colspan="2">고래</th>
</tr>
<tr>
<td rowspan="2">상어</td>
<td>문어</td>
<td>꽁치</td>
</tr>
<tr>
<td>고등어</td>
<td>돌고래</td>
</tr>
</table>
</body>
>> 결과
테이블의 캡션 (caption) 설정 :
<caption> 태그 : 테이블 상단에 제목이나 짧은 설명을 붙일 수 있음.
<table>
<caption> 제목 </caption>
<tr>
<td>내용 </td>
</tr>
</table>
출처 : TCP스쿨
'[1일1코딩]' 카테고리의 다른 글
| 코딩독학 HTML iframe 요소 feat. tcpschool (2) | 2018.05.10 |
|---|---|
| 코딩독학 HTML 블록과 인라인 feat. tcpschool (0) | 2018.05.09 |
| 코딩독학 HTML 리스트 feat. tcpschool (6) | 2018.05.02 |
| 코딩독학 HTML 이미지 feat. tcpschool (2) | 2018.05.01 |
| 코딩독학 HTML 링크 feat. tcpschool (2) | 2018.04.30 |