[HTML] 표 만들기 위한 태그 <table>태그

[HTML] 표 만들기 위한 태그 <table>태그

동시설명 : <tr>,<td>,<thead>,<tbody>,<th> 태그

By i!kohong(아이코홍)

---

작성방법 : 아래의 예시 참고

 

태그 설명

• 페이지 내의 표를 만들기 위한 태그
• 단순 <table>태그만을 사용해서 만드는것이 아닌, <thead>,<tbody>,<tr>,<th>,<td>를 같이 이용하여 작성을 합니다.
• 일반적으로는 <table>,<tr>,<td>만으로도 표를 만들수 있습니다.
• <tr>태그는 행(가로)를 의미합니다.
• <td>태그는 열(세로)를 의미합니다.
• <thead>태그는 표의 제목을 의미합니다.
• <tbody>태그는 표의 본문 영역을 의미합니다.
• <th>태그는 제목 셀을 의미합니다.
• 별도의 CSS를 작성하지 않으면, 표의 테두리를 구현할 수 없습니다.

 

Attribute(속성)

태그	속성값	설명
<td>	colspan	열을 확장시키는 의미, n개의 열을 합치는 모습을 볼 수 있습니다.
	rowspan	행을 확장시키게 해준다. n개의 행을 합치는 모습을 볼 수 있습니다.

 

CSS

속성	지정 방식	설명
border	(n)px 테두리모양 테두리색상	테두리 전체적인 모양을 지정해줍니다. 작성 순서는 상관없습니다.
border-collapse	collapse;	셀 테두리를 축소시켜준다. 중복되는선 없이 깔끔한 표가 생성된다.
padding	(n)px;	셀에 패딩 추가
text-align	left	텍스트 왼쪽 정렬
	right	텍스트 오른쪽 정렬
	center	텍스트 센터 정렬
border-spacing	(n)px;	셀 사이의 간격을 설정

예시