티스토리 뷰

4학년 1학기/HTML

HTML Table 만들기

Hading 2017. 3. 23. 21:17

HTML 테이블 정의하기

HTML 테이블은 <table> 태그 로 정의 됩니다.

각 테이블 행은 <tr> 태그 로 정의 됩니다. 표 머리글은 <th> 태그 로 정의 됩니다. 기본적으로 테이블 표제는 굵게 표시되고 중앙에 배치됩니다. 테이블 데이터 / 셀은 <td> 태그 로 정의 됩니다.


<!DOCTYPE html>

<html>

<body>


<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>

  <tr>

    <td>John</td>

    <td>Doe</td>

    <td>80</td>

  </tr>

</table>


</body>

</html>


참고 : <td> 요소는 표의 데이터 컨테이너입니다.

여기에는 모든 종류의 HTML요소가 포함될 수 있습니다. 

텍스트, 이미지, 목록, 다른 테이블 등


HTML 표 - 테두리 추가

표에 테두리를 지정하지 않으면 테두리없이 테두리가 표시됩니다.

테두리는 CSS 테두리 속성을 사용하여 설정 됩니다.


<!DOCTYPE html>

<html>

<head>

<style>

table, th, td {

    border: 1px solid black;

}

</style>

</head>

<body>


<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>

  <tr>

    <td>John</td>

    <td>Doe</td>

    <td>80</td>

  </tr>

</table>


</body>

</html>


HTML 표 - 셀 채우기 추가

셀 패딩은 셀 내용과 경계 사이의 간격을 지정합니다.

패딩을 지정하지 않으면 테이블 셀이 패딩없이 표시됩니다.

패딩을 설정하려면 CSS 패딩 속성을 사용하십시오 .


th, td {
    padding: 15px;

} 


HTML 표 - 왼쪽 맞춤 표제

기본적으로 테이블 표제는 굵게 표시되고 중앙에 배치됩니다.

표 머리글을 왼쪽 정렬하려면 CSS text-align 속성을 사용하십시오.


 th {

    text-align: left;
}


참고 : right, center 로 맞출 수 있습니다.


HTML 표 - 테두리 간격 추가

테두리 간격은 셀 사이의 간격을 지정합니다.

표의 테두리 간격을 설정하려면 CSS border-spacing 속성을 사용하십시오.


table {

    border-spacing: 5px;
}


HTML 표 - 여러 열을 포함하는 셀

셀이 둘 이상의 열을 확장하려면 colspan 특성을 사용하십시오 .


 <!DOCTYPE html>

<html>

<head>

<style>

table, th, td {

    border: 1px solid black;

    border-collapse: collapse;

}

th, td {

    padding: 5px;

    text-align: left;    

}

</style>

</head>

<body>


<h2>Cell that spans two columns:</h2>

<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>


</body>

</html>


 


HTML 표 - 많은 행을 포함하는 셀

셀이 둘 이상의 행에 걸쳐 있도록하려면 rowspan 속성을 사용하십시오.


<!DOCTYPE html>

<html>

<head>

<style>

table, th, td {

    border: 1px solid black;

    border-collapse: collapse;

}

th, td {

    padding: 5px;

    text-align: left;    

}

</style>

</head>

<body>


<h2>Cell that spans two rows:</h2>

<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>


</body>

</html>


 



HTML 표 - 캡션 추가하기

캡션을 표에 추가하려면 <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>



하나의 테이블을위한 특별한 스타일

특별한 테이블을위한 특별한 스타일을 정의하기 위해, id 속성을 테이블에 추가 하십시오.


<!DOCTYPE html>

<html>

<head>

<style>

table, th, td {

    border: 1px solid black;

    border-collapse: collapse;

}

th, td {

    padding: 5px;

    text-align: left;

}

table#t01 {

    width: 100%;    

    background-color: #f1f1c1;

}

</style>

</head>

<body>


<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>

  <tr>

    <td>John</td>

    <td>Doe</td>

    <td>80</td>

  </tr>

</table>

<br>


<table id="t01">

  <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>

  <tr>

    <td>John</td>

    <td>Doe</td>

    <td>80</td>

  </tr>

</table>


</body>

</html>


 


<!DOCTYPE html>

<html>

<head>

<style>

table {

    width:100%;

}

table, th, td {

    border: 1px solid black;

    border-collapse: collapse;

}

th, td {

    padding: 5px;

    text-align: left;

}

table#t01 tr:nth-child(even) {

    background-color: #eee;

}

table#t01 tr:nth-child(odd) {

   background-color:#fff;

}

table#t01 th {

    background-color: black;

    color: white;

}

</style>

</head>

<body>


<table>

  <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>

  <tr>

    <td>John</td>

    <td>Doe</td>

    <td>80</td>

  </tr>

</table>

<br>


<table id="t01">

  <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>

  <tr>

    <td>John</td>

    <td>Doe</td>

    <td>80</td>

  </tr>

</table>


</body>

</html>


 


HTML 표 태그


<Table> : Table

- <TABLE> </TABLE> : 테이블의 생성
- <TABLE WIDTH="가로" HEIGHT="세로"> </TABLE> : 테이블 전체의 가로 세로 크기
- <TABLE BORDER="굵기" > </TABLE> : 테이블 전체의 테두리 굵기
- <TABLE BORDERCOLOR="색상"> </TABLE> : 테이블 전체의 테두리 색상
- <TABLE BORDERCOLORLIGHT="색상"> </TABLE> : 테이블 전체의 테두리 색상 중 밝은 부분
- <TABLE BORDERCOLORDARK="색상"> </TABLE> : 테이블 전체의 테두리 색상 중 어두운 부분
- <TABLE BGCOLOR="색상"> </TABLE> : 테이블 전체의 배경 색상
- <TABLE BACKGROUND="그림 경로"> </TABLE> : 테이블 전체의 배경 그림
- <TABLE ALIGN="정렬 위치"> </TABLE> : 테이블 전체의 수평 정렬 
- <TABLE VALIGN="정렬 위치"> </TABLE> : 테이블 전체의 수직 정렬
- <TABLE CELLPADDING="여백"> </TABLE> : 테이블내의 셀과 데이터간의 간격
- <TABLE CELLSPACING="여백"> </TABLE> : 테이블내의 셀과 셀의 간격

▲ <TABLE>에만 있는 옵션

- BORDER, BORDERCOLOR, BORDERCOLORLIGHT, BORDERCOLORDARK, CELLPADDING, CELLSPACING

▲ <TABLE>, <TR>, <TD>의 공통 옵션

- WIDHT, HEIGHT, BGCOLOR, BACKGROUND, ALIGN, VALIGN

 

<TR> : Table Row

- <TR> </TR> : 테이블내 행의 형식 지정(<TR>의 개수 만큼 행의 개수가 결정)
- <TR WITHD="가로" HEIGHT="세로"> </TR> : 행의 가로 세로 크기
- <TR BGCOLOR="색상"> </TR> : 행의 배경 색상
- <TR BACKGROUND="그림 경로"> </TR> : 행의 배경 그림 
- <TR ALIGN="정렬 위치"> </TR> : 행의 수평 정렬
- <TR VALIGN="정렬 위치"> </TR> : 행의 수직 정렬

 

<TD> : Table Data

- <TD> </TD> : 행내의 셀(데이터)의 개수(<TD>의 개수 만큼 셀 개수가 결정)
- <TD WITHD="가로" HEIGHT="세로"> </TD> : 셀의 가로 세로 크기
- <TD BGCOLOR="색상"> </TD> : 셀의 배경 색상
- <TD BACKGROUND="그림 경로"> </TR> : 셀의 배경 그림 
- <TD ALIGN="정렬 위치"> </TD> : 셀의 수평 정렬
- <TD VALIGN="정렬 위치"> </TD> : 셀의 수직 정렬
- <TD COLSPAN="합칠 열의 수"> </TD> : 셀을 지정된 열의 수 만큼 합치기
- <TD ROWSPAN="합칠 행의 수"> </TD> : 셀을 지정된 행의 수 만큼 합치기

▲ <TD>에만 있는 옵션

- COLSPAN, ROWSPAN



'4학년 1학기 > HTML' 카테고리의 다른 글

HTML 링크  (0) 2017.03.09
HTML 스타일 - CSS  (0) 2017.03.09
HTML 주석  (0) 2017.03.08
HTML 컴퓨터 코드 요소  (0) 2017.03.08
HTML 인용문 및 인용문 요소  (0) 2017.03.06
공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday
링크
TAG
more
«   2024/07   »
일 월 화 수 목 금 토
1 2 3 4 5 6
7 8 9 10 11 12 13
14 15 16 17 18 19 20
21 22 23 24 25 26 27
28 29 30 31
글 보관함