html 웹페이지를 구성하는 요소는 다양합니다. 기본적인 뼈대는 html을 이용하게 되며, 외관을 꾸미는 것은 css 스타일로 구분할 수 있습니다. 사실, 개인의 기록용이기 때문에 내용에 두서가 없을 수 있습니다. 이 부분을 참고하여 자료를 봐주시면 감사하겠습니다.
집을 짓기 위해서는 일정한 규칙이 존재합니다. 우선 토목 공사를 통해 집을 지을 수 있는 땅을 마련해야 합니다. 그 다음으로 설계도에 맞게 집을 짓게 됩니다. 마지막으로 인테리어 공사를 통해 외관을 꾸미고 사람이 살 수 있게 됩니다.
Table의 경우 기본적으로 자료를 이쁘게 정렬하는 기능도 있지만, 사용하기에 따라서는 웹페이지의 layout을 형성하는 도구가 될 수 있습니다. 페이지의 내용이 잘 정렬되어 있다면 보는 사람들도 만족감이 높아질 수 있을 테니 말이죠.
테이블 만들기
테이블은 테이블을 만들겠다고 선언하는 문자로 시작합니다. 다음으로 헤더, 행, 열로 만들어지게 됩니다. 마지막은 테이블 선언을 닫아주면 끝이나게 됩니다.
| 주제 | 태그 | 비고 |
| 테이블의 구성 | <table> | 테이블 선언 |
| <th> | 테이블 헤더 | |
| <tr> | 테이블 행 | |
| <td> | 테이블 열 |
✔ 기본 코드
<table>
<th>머리 부분</th>
<tr>
<td>
셀 부분
</td>
</tr>
</table>위 코드처럼 입력하면 아래 모습이 보입니다.
문제는 테두리 선들이 보이지 않는 것이죠. 여기서 적당히 css style을 적용해 줍니다. 외각선은 border로 px값을 지정하실 수 있습니다. 디자인 감각을 살리기 위해서는 보다 다양한 요소와 애니메이션을 이용하면 좋습니다.
✔ css 넣기
각 부분에 style = “border: 1px solid;”로 넣어도 됩니다.
<table>
<th style = "border: 1px solid;">머리 부분</th>
<tr>
<td style = "border: 1px solid;">
셀 부분
</td>
</tr>
</table>
하지만 반복되는 작업과 보기에 싫으니까, <head>부분에 스타일 시트를 넣어줄 수 있습니다. css 요소가 많아지면 별도의 스크립트를 이용해 css파일을 불러올 수도 있습니다. 그 정보의 규모를 하기 전 css연습에는 <head></head>부분에 스타일 코드를 넣어주는 것으로도 충분할 것입니다.
<head>
<style>
th, td
{
border : 10px solid;
}
</style>
</head>
<body>
<table>
<th>머리 부분</th>
<tr>
<td>
셀 부분
</td>
</tr>
</table>
</body>
이제 다양한 css를 첨가해서 멋진 테이를을 활용하면 됩니다.