[HTML/CSS] 표 만들기 <table>태그!!(2)

 

[HTML/CSS] 표 만들기 <table>태그!!(2)

앞서 <table>태그의 구성에 대해 간단히 다뤘는데 이번엔 <table>태그에 들어가는 속성에 대해 다뤄볼게요.

 

▶관련 포스팅◀ [TIP/Blog] - [HTML/CSS] 표 만들기 〈TABLE〉태그!!(1)

<table></table> 테이블 태그

태그	속성	속성값	비고
table	align	정렬	left / right / center, 기본값left
	border	숫자	테두리의 두께, 기본값0
	bordercolor	색상코드	0000FF, FFFFFF 등등, 테두리 색상
	width/height	숫자	표의 너비 / 높이
	cellpadding	숫자	셀 테두리와 내용 사이의 간격
	cellspacing	숫자	셀과 셀 사이의 간격
	background	파일명이나 URL	표의 배경 이미지 삽입
	bgcolor	색상코드	0000FF, FFFFFF 등등, 배경 색상

가장 많은 질문 이 있는 "cellspacing"과 "cellpadding"의 차이점이 보이시나요? 셀 여백 설정을 할때 고려해야 할 부분이에요. TIP. 요즘은 각 기기간의 호환성을 위해 반응형 웹 페이지를 만드는 추세인데 <table>태그의 width를 작성하지 않거나 width="100%"등의 %값을 넣으면 화면의 크기를 따라 표 크기가 자동 조절 됩니다.

 

<caption></caption> 캡션 달기

태그	속성	속성값	비고
caption	align	정렬	top / bottom

<caption>태그는 표의 위나 아래에 위치하며 가운데 정렬을 합니다.

 

 

 

<tr></tr> table row 행 태그

태그	속성	속성값	비고
tr	align	정렬	left / right / center, 기본값left
	height	숫자 / % 등	높이 지정
	bgcolor	색상코드	0000FF, FFFFFF 등등, 배경 색상
	background	파일명이나 URL	행의 배경 이미지 삽입

 

<th></th> table head 셀 제목 태그 / <td></td> table data 셀 태그

태그	속성	속성값	비고
th / td	valign	정렬	top / middle / bottom, 기본값middle
	align	정렬	left / right / center, 기본값center
	width/height	숫자 / % 등	셀의 너비 / 높이
	bgcolor	색상코드	0000FF, FFFFFF 등등, 배경 색상
	background	파일명이나 URL	셀의 배경 이미지 삽입
	rowspan	숫자	행 합치기, 합칠 셀의 개수
	colspan	숫자	열 합치기, 합칠 셀의 개수

<th>태그와 <td>태그는 동일한 속성을 사용해요.

이렇게 <table>태그에 대해 알아봤어요. 속성도 다양하고 행과 열을 맞춰줘야 하는등 얼핏 보면 복잡하지만 천천히 살펴보면 생각보다 어렵지 않게 다룰 수 있어요. 마지막 TIP으로 셀 안에 많은 내용을 기입 할 경우 가독성을 위해서 웹 페이지 스스로 줄 바꿈을 하지만 필요에 따라 줄이 바뀌면 안되는 경우 <td nowrap> </td>으로 줄 바꿈을 강제로 금지 시킬 수도 있답니다.

 

 

< 연습하기 >

 

w3스쿨js피들