-
표관련 태그와 속성HTML5 CSS3/테이블 Table 2015. 6. 2. 02:13
워드프레스를 써서 홈페이지를 만들려고 해도... 코드를 만들고 만들면 한계가 있습니다.
그래서 기본적인 코드 태그들을 알아야 합니다. 특히 테이블을 어느정도 알아야.. 삽입하기가 편리합니다.
<table style="width:100%" border="1">
<tr>
<td>KIM</td>
<td>PARK</td>
<td>20</td>
</tr>
<tr>
<td>SOODONG</td>
<td>DAEKIL</td>
<td>50</td>
</tr>
</table>화면에는 이렇게 표현이 된다. 아무런 설정도 하지 않았기에... 줄 간격이나, 줄 폭이 예쁘지가 않다.
그래서 문서전체에 스타일을 정해 border-collapse: collapse; 와 solid를 넣으면 깔끔해진다.
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
</style>
</head><table style="width:100%; border-collapse: collapse; border: 1px solid black;">
<tr>
<td>KIM</td>
<td>PARK</td>
<td>20</td>
</tr>
<tr>
<td>SOODONG</td>
<td>DAEKIL</td>
<td>50</td>
</tr>
</table></body>
</html>HTML Table Tags (HTML테이블 태그)
Tag Description <table> Defines a table <th> Defines a header cell in a table : 제목이 들어갈 셀 추가
<tr> Defines a row in a table : 행 추가 <td> Defines a cell in a table : 셀 추가 <caption> Defines a table caption : 표에 간단한 제목을 넣을 때 <colgroup> Specifies a group of one or more columns in a table for formatting : 여러개의 col요소를 하나의 그룹으로 묶어야 할 때
<col> Specifies column properties for each column within a <colgroup> element :셀이나 행을 합치기
<thead> Groups the header content in a table : 여러개의 열을 하나의 그룹으로 묶어 표 헤더로 만들 때
<tbody> Groups the body content in a table : 여러 열을 묶어 전체 컨텐츠의 그룹화 할 때
<tfoot> Groups the footer content in a table : 여어 열을 묶어 푸터로 만들 때
background-color :
'HTML5 CSS3 > 테이블 Table' 카테고리의 다른 글
표, 테이블에 스타일 넣기 (0) 2015.06.07 표, 테이블만들기 태그 <table>,<thead>, <tbody>,<tfoot>,<tr>,<td> (0) 2015.06.07
