표관련 태그와 속성

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