인터넷 프로그래밍 3-1 테이블태그

인터넷 프로그래밍
3-1 테이블태그

 

단원 목표

1. 표의 기본 태그를 나열하고 설명하기
2. 표의 테두리와 크기를 조절할 수 있다.
3. 행과 열을 합치는 방법을 설명할 수 있다.

 

표(Table)의 기본 구조
<table> 표를 정의
<th> 표 제목 (Table Head)
<tr> 행 (Table Row)
<td> 셀 항목 (Table Data)
<caption></caption>
<thead> Table Header </thead>
<tfoot> Table Footer </tfoot>
*<th> 기본값으로 굵게, 가운데 정렬

표의 테두리(Border)
<style> 태그로 지정할 수 있음
ex) 
table, th, td{
border: 1px solid black;   두께 1px, 실선, 검정색
}

 

border-collapse: collapse; - 합치기. 표의 테두리들 사이의 간격을 없앤 경우
border-radius: 10px; - 모양 둥글게 변경
background-color:#DA6F6F;-  배경색
width: 100px or 10%; - 표나 셀의 크기는 픽셀 또는 퍼센트로 지정함.
<th colspan="2">열제목 1&2</th> - 열 합치기
<td rowspan="3">행 1&2&3</td> - 행 합치기


**w3schools 에서 learn html 에서 table 에서 실습 가능!

 

 

*** *** ***  *** ***  *** ***  *** ***  *** ***  *** *** 핵심정리 *** ***  *** ***  *** ***  *** ***  *** ***  *** *

표(table) - 표제목, 열, 행

-td, td, table 은 배경색, 모양을 다 다르게도 할 수 있다.

-픽셀 또는 퍼센트로 크기나 길이를 설정한다.

-테두리 모서리는 radius 로 둥글게 설정한다.