 |
   |
|
 |  |
|
     |
|
 |
||
|
||
로그인
[HTML] 테이블
관리자
2020-03-14 19:53:01 Hit:3742
링크 #1: https://blog.naver.com/hadaboni80/221713004258
[HTML] 테이블 -table,th,tr,td,caption,colgroup,col,thead,tbody,tfoot
HTML
2019. 11. 20. 8:45
https://blog.naver.com/hadaboni80/221713004258
HTML table 정의하기
HTML에서 테이블은 <table>태그로 정의됩니다.
각각의 테이블 열은 <tr>태그로 정의합니다.
테이블의 머리부분은 <th>태그로 정의합니다.
데이블의 머리부분은 기본적으로 굵은 글씨와 가로중앙 정렬로 표시가 됩니다.
테이블의 데이터/셀은 <td>태그로 정의해줍니다.
예제
<table style="width:100%">
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
</table>
중요 : <td>요소는 테이블에서 데이터가 담기는 그릇입니다. 해당 요소는 거의 모든 종류의 HTML요소들을 담을 수 있습니다 . 텍스트, 이미지, 목록, 다른 테이블 등등
HTML Table - 테두리 추가하기
만약 여러분이 테이블에 테두리를 따로 설정하지 않는다면, 해당 테이블은 테두리 없이 출력될거에요.
테이블의 테두리는 CSS border속성으로 나타낼 수 있습니다.
예제
table, th, td {
border: 1px solid black;
}
테두리는 테이블과 테이블 셀 양쪽 모두에게 적용해야 된다는 점을 명심하세요.
HTML Table - 테두리 경계 합치기
여러분들이 테이블의 테두리 경계를 하나의 선으로 합치기를 원한다면, CSS border-collapse 속성을 사용해보세요.
예제
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
HTML Table - 셀에 안쪽 여백 설정하기
셀 안쪽 여백이란, 해당 셀에 들어있는 컨텐츠 내용과 해당 테두리 사이의 거리를 의미합니다.
만약 안쪽 여백을 지정하지 않는다면, 각 셀은 여백없이 출력될거에요.
안쪽 여백을 세팅하기 위해서는 CSS padding 속성을 사용하면 됩니다.
예제
th, td {
padding: 15px;
}
HTML Table - 제목부분 왼쪽 정렬 시키기
기본설정으로 테이블의 제목부분은 굵게 표시가 되고 중앙정렬이 됩니다.
제목부분의 글자를 왼쪽 정렬시키 위해서는 CSS text-align속성을 사용하면 됩니다.
예제
th {
text-align: left;
}
HTML Table - 테두리 사이의 간격 벌리기
테두리 간격이란 각 셀들 간의 공간을 의미합니다.
테이블의 테두리 간격을 설정하기 위해서는 border-spacing 속성을 사용하면 됩니다.
예제
table {
border-spacing: 5px;
}
중요 : 만약 테이블의 테두리가 이미 합쳐져 있다면, border-spacing 은 적용되지 않습니다.
HTML Table - 여러개의 칸을 합친 셀
복수개의 컬럼을 합친 셀을 만들기 위해서는 colspan 속성을 사용하면 됩니다.
예제
<table style="width:100%">
<tr>
<th>Name</th>
<th colspan="2">Telephone</th>
</tr>
<tr>
<td>Bill Gates</td>
<td>55577854</td>
<td>55577855</td>
</tr>
</table>
HTML Table - 여러개의 열을 합친 셀
복수개의 열을 합치기 위해서는 rowspan 속성을 사용하면 됩니다.
예제
<table style="width:100%">
<tr>
<th>Name:</th>
<td>Bill Gates</td>
</tr>
<tr>
<th rowspan="2">Telephone:</th>
<td>55577854</td>
</tr>
<tr>
<td>55577855</td>
</tr>
</table>
HTML Table - Caption 추가하기
<caption> 태그를 이용하면, 테이블에 캡션을 달아줄 수 있습니다.
예제
<table style="width:100%">
<caption>Monthly savings</caption>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$50</td>
</tr>
</table>
중요 : <caption>태그는 반드시 <table>태그 바로 다음에 삽입되어야 합니다.
하나의 테이블에만 특별한 스타일 적용하기
특정 테이블에만 특별한 스타일을 지정하고자 할때는, id속성을 해당 테이블에 적용해주면 됩니다.
예제
<table id="t01">
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
</table>
이제 위의 해당 테이블에 특별한 스타일을 지정 할 수 있습니다.
table#t01 {
width: 100%;
background-color: #f1f1c1;
}
스타일을 좀 더 지정해보겠습니다:
table#t01 tr:nth-child(even) {
background-color: #eee;
}
table#t01 tr:nth-child(odd) {
background-color: #fff;
}
table#t01 th {
color: white;
background-color: black;
}
단원 요약
HTML <table> 요소는 테이블을 정의합니다.
HTML <tr> 요소는 테이블의 열을 정의합니다.
HTML <td> 요소는 테이블 데이타를 정의합니다.
HTML <th> 요소는 테이블 머리부분을 정의합니다.
HTML <caption> 요소는 테이블에 캡션을 정의합니다.
CSS border 속성은 테두리를 지정합니다.
CSS border-collapse 속성은 테이블의 테두리를 합쳐줍니다.
CSS padding 속성은 셀 안쪽의 여백을 지정합니다.
CSS text-align 속성은 셀 안쪽의 텍스트 정렬을 지정합니다.
CSS border-spacing 속성은 셀사이의 간격을 지정합니다.
colspan 속성은 복수개의 컬럼을 묶어줍니다.
rowspan 속성은 복수개의 열을 묶어줍니다.
id 속성으로 하나의 테이블에 유일성을 부여할 수 있습니다.
HTML Table 태그
△ 곰앤컴퍼니 (곰플레이어) 자료실(코덱 Codec)
▽ [JQuery] 상단메뉴 슬라이드(펼치기) 초간단
Copyright 1999-2025 Zeroboard / skin by ChanBi
