1. <Table> 태그
웹페이지에 표를 넣는 방법에 대해서 알아보겠습니다. table의 data는 <td>로 표현을 하고 표의 각각의 실제 데이터를 의미합니다. 이름, 성별, 주소가 하나의 행이되고, 최진혁, 남, 청주는 밑으로 내려가야합니다. table row의 약자인 <tr>태그를 통해 각각의 행들을 그룹핑 해줍니다. 그리고 이 태그들은 <table>이라는 태그로 묶어주어야 합니다. 그리고 table의 속성에 border값을 설정하여 테두리를 설정합니다.
<html>
<head><meta charset="utf-8"></head>
<body>
<table border="2">
<tr>
<td>이름</td> <td>성별</td> <td>주소</td>
</tr>
<tr>
<td>최진혁</td> <td>남</td> <td >청주</td>
</tr>
<tr>
<td>최유빈</td> <td>여</td> <td>청주</td>
</tr>
</table>
</body>
</html>
2. 테이블의 정보를 가치있게 만들기
밑의 예제는 위의 예제와는 시각적으로 차이가 없습니다. 테이블의 데이터를 보면 성격이 다릅니다. 태그는 정보를 정의하는 녀석입니다. 어떤 웹페이지에 있는 정보를 좀 더 가치있게 만들려면 좀 더 구조화하는 작업이 필요합니다. 위의 테이블에서 이름, 성별, 주소는 데이터들의 제목입니다. 이거를 <th>라는 태그로 바꿔 줄 수 있습니다. 또한 <tfoot>이라는 태그를 사용하면 표의 가장 아래쪽에 들어갈 정보를 표현하고 테이블의 어떤 위치에 있어도 가장 아래쪽으로 내려가서 웹페이지에 나타납니다. <th>도 마찬가지로 <table> 안에서 어느 위치에 있어도 표의 상단에 나타나게 됩니다.
<html>
<head><meta charset="utf-8"></head>
<body>
<table border="2">
<thead>
<tr>
<th>이름</th> <th>성별</th> <th>주소</th> <th>회비</th>
</tr>
</thead>
<tbody>
<tr>
<td>최진혁</td> <td>남</td> <td >청주</td> <td>1000</td>
</tr>
<tr>
<td>최유빈</td> <td>여</td> <td>청주</td> <td>500</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>합계</td> <td></td> <td></td> <td>1500</td>
</tr>
</tfoot>
</table>
</body>
</html>
3. 표 병합
다음으로는 표를 병합하는 방법을 알아보겠습니다. 병합하고자 하는 부분의 첫부분에 새로운 속성을 추가합니다. 바로 rowspan이라는 속성입니다. rowspan="2" 는 2개의 행이 병합된다는 뜻 입니다. 그러면 밑의 중복되는 청주를 지워주면 됩니다. 합계라고 되어 있는 부분은 각각의 3개의 칸을 합치려고 합니다. 수평의 방향(열과 열)으로 합칠 때는 colspan="3" 이라고 적어주면 됩니다. 그리고 여러분이 적어준 숫자 - 1만큼 태그를 지어주면 됩니다.
<html>
<head><meta charset="utf-8"></head>
<body>
<table border="2">
<thead>
<tr>
<th>이름</th> <th>성별</th> <th>주소</th> <th>회비</th>
</tr>
</thead>
<tbody>
<tr>
<td>최진혁</td> <td>남</td> <td rowspan="2">청주</td> <td>1000</td>
</tr>
<tr>
<td>최유빈</td> <td>여</td> <td>500</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="3">합계</td> <td>1500</td>
</tr>
</tfoot>
</table>
</body>
</html>
'HTML' 카테고리의 다른 글
| [HTML] 정보로서의 html (0) | 2019.05.08 |
|---|---|
| [HTML] <form> 태그 (0) | 2019.05.08 |
| [HTML] html 태그(p, br, img) (0) | 2019.05.02 |
| [HTML] html 문서의 구조 (0) | 2019.05.02 |
| [HTML] 태그의 중첩과 목록(리스트) (0) | 2019.05.02 |
