테이블은 표를 웹페이지에 표시할때 사용하며 HTML에서 사용하는 표는 table 태그로 시작하게 되며 표를 나누고자한다면 tr 태그는 행 , td 태그는 열로 나누고, th는 td 대신 사용하여 텍스트를 굶게 표시합니다.
표의 두께는 border=”2″ 속성이 사용되기도 하며 테이블의 여러깐을 하나로 나누기 위해서는 rowspan=”2″ 행 합치기, colspan=”2″ 열 합치기가 사용되기도 합니다.
기본 표 만들기
예제를 보게 되면 table 태그 사이에 tr 행 /tr 그리고 td 열 td 로 3열과 3행으로 table border=”2″ 보드 두께는 2로 하였습니다.
<html>
<head>
</head>
<body>
<table border="2">
<tr>
<th>이름</td> <th>성별</th> <th>주소</th>
</tr>
<tr>
<td>홍길동</td> <td >남</td> <td >서울</td>
</tr>
<tr>
<td>이유빈</td> <td>여</td> <td>부산</td>
</tr>
</table>
</body>
</html>
표 행과열 합치기
행을 합치기 위해서는 td rowspan=”2″행합치기 속성을 사용하며, td colspan=”3″열합치기 td 속성을 사용합니다.
<html>
<head>
</head>
<body>
<table border="2">
<thead>
<tr>
<th>이름</th> <th>성별</th> <th>주소</th> <th>비고</th>
</tr>
<tr>
<td>홍길동</td> <td>남</td> <td rowspan="2">서울</td> <td>1000</td>
</tr>
<tr>
<td>이유빈</td> <td>여</td> <td>500</td>
</tr>
<tr>
<td colspan="3">합계</td> <td>1500</td>
</tr>
</table>
</body>
</html>
테이블 표 색상 적용
기본 표 색상에서 다른색상을 주고자 한다면 style 스타일 시트를 적용하며 border: 1px 보드 두께, solid gray; 색상을 적용합니다.
<html>
<head>
<style>
table, th, td{
border:1px solid gray;
padding: 10px; }
</style>
</head>
<body>
<table border="2">
<tr>
<th>이름</td> <th>성별</th> <th>주소</th>
</tr>
<tr>
<td>홍길동</td> <td >남</td> <td >서울</td>
</tr>
</table>
</body>
</html>표와 글자 간격 조절
테이블의 셀 간격을 조절하고자 한다면 padding 속성을 css 에 추가를 하여 간격만큼의 px 를 입력하여 텍스트와 툐 사이의 간격을 조절할수가 있습니다.
표 반응형 화면 비율
표를 웹브라우저나 스마트폰 화면의 크기에 따라서 최대 크기로 자동으로 맞추고자 한다면 style 에 table 사이에 width: 100%; 속성을 넣습니다.
<html>
<head>
<style>
table{
width: 100%; }
</style>
</head>
<body>
<table border="2">
<tr>
<th>이름</td> <th>성별</th> <th>주소</th>
</tr>
<tr>
<td>홍길동</td> <td >남</td> <td >서울</td>
</tr>
</table>
</body>
</html>
표의 텍스트 정렬하기
표의 텍스트를 정렬하고자 한다면 CSS 에 th, th 태그를 선택자로 text-align 속성을 사용하며 left; 왼쪽, right: 오른쪽, center: 중앙정렬 속성을 부여합니다.
<html>
<head>
<style>
table, td, th{padding:50px}
th{text-align:left;}
td{text-align:center;}
</style>
</head>
<body>
<table border="2">
<tr>
<th>이름</td> <th>성별</th> <th>주소</th>
</tr>
<tr>
<td>홍길동</td> <td >남</td> <td >서울</td>
</tr>
</table>
</body>
</html>
표 테두리 한줄 적용
CSS에서 table, th, td 태그를 적용하여 border-collapse:collapse; 속성을 추가하게 되면 두줄의 테두리가 한줄로 나타나게 됩니다.
<html>
<head>
<style>
table, td, th{
padding:30px;
border:1px solid gray;
border-collapse:collapse; }
</style>
</head>
<body>
<table border="2">
<tr>
<th>이름</td> <th>성별</th> <th>주소</th>
</tr>
<tr>
<td>홍길동</td> <td >남</td> <td >서울</td>
</tr>
</table>
</body>
</html>
