HTML 테이블 만들어보기
안녕하세요 산책입니다.
오늘은 웹 페이지에 테이블을 삽입하는 방법에 대해 알아보도록 하겠습니다.
오늘의 태그 !
<table><tr><th><td>
<body>
<h3> 오늘의 날씨 </h3>
<table border="1">
<tr>
<th> 지역</th> <th>최저기온</th> <th> 최고기온</th>
</tr>
<tr>
<td>서울</td><td>20</td><td>30</td>
</tr>
<tr>
<td>대구</td><td>20</td><td>30</td>
</tr>
<tr>
<td> 광주</td><td>20</td><td>30</td>
</td>
<tr>
<td>부산</td><td>20</td><td>33</td>
</tr>
</table>
</body>
하나하나씩 살펴봅시다.
<table>
<table>태그는 9~23행의 전체 테이블을 감싼다. border="1" 은 테이블의 경계선 두께를 1픽셀로 설정합니다.
※테이블 경계선, 셀의 크기, 등은 css를 사용합니다.!
<tr>
빨간색으로 표시된 각 행을 나타냅니다.
가로라고 보시면 됩니다. table row 의 줄임말입니다.
<th>
초록색 영역의 표시된 부분입니다. <th>태그는 테이블의 첫 번째 행에서 사용되며
제목을 만드는데 사용됩니다. table head의 줄임말입니다.
<td>
노란색 영역의 표시된 부분입니다. <td>태그는 테이블의 행 내에 있는 각 셀을 표현하는 데 사용됩니다.
2.열과 행의 병합
<tr>
<th> 지역</th> <th colspan="2">최저기온</th>
</tr>
colspan="2"
<th> 태그 에서 사용되는 colspan 속성은 테이블에서 열을 병합하는 데 사용됩니다.
colspan에서 col 은 column(열),span은 확장이라는 의미를 함축하고 있습니다.
3. 행의 병합
<th>태그 (<td>도사용가능) rowspan 속성은 행의 병합하는 데 사용됩니다.
rowspan에서 row는 행을 뜻합니다.
html의 기본은 배웠습니다.
하지만 우리는 글자의 색을 넣는다던가 비율을 조절한다던가
뭔가 이렇게만 만들면 90년대 네이버를 보는듯한 느낌이 들어요
우리는 생각했습니다. 더욱더 이쁘게 만들고 싶다.
그래서 만든것이 CSS라는 것입니다.
우리는 쉽게 폰트를 넣을 수 있고 색을 바꿀 수 있습니다.
다음 시간에는 CSS의 기초를 배워 보도록 하겠습니다.
감사합니다!!