<목차>
- HTML에서 table 생성하기
- HTML에서의 핵심 내용 요약
<HTML에서 table 생성하기>
html에서 <table>엘리먼트를 사용하여 테이블을 만들고
이를 활용해서 게시판, 회원가입 페이지 등과 같은 것들을 만들 수 있다.
html을 이용하여 웹페이지 상에 테이블을 생성하기 위해서는 우선 다음과 같은 프로세스를 따라야 한다.
- row를 생성한다.
- column을 생성한다.
<table>엘리먼트는 기본적으로 <body>엘리먼트 안에서 작성한다.
그리고 row를 생성하기 위해서는 <tr>엘리먼트, column을 생성하기 위해서는 <td>엘리먼트를 사용한다.
아래의 코드를 보고 좀 더 이해해 보자.
<body>
<!--table-->
<table border="1">
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
</tr>
<tr>
<td>9</td>
<td>10</td>
<td>11</td>
<td>12</td>
</tr>
</table>
<table>
<tr>
<td>번호</td>
<td>제목</td>
<td>작성자</td>
<td>작성일</td>
<td>조회수</td>
</tr>
<tr>
<td>1</td>
<td>안녕하세요</td>
<td>ingoo</td>
<td>2021-12-21</td>
<td>10</td>
</tr>
<tr>
<td>2</td>
<td>안녕하세요</td>
<td>ingoo</td>
<td>2021-12-21</td>
<td>11</td>
</tr>
</table>
</body>
<body>엘리먼트 안에 <tr>엘리먼트를 생성하고 <tr>엘리먼트 안에 <td>엘리먼트를 생성하여 몇개의 줄과 몇개의 칸으로 만들어진 테이블을 만들것인지에 대한 기본적인 테이블 모양을 만들 수 있다.
- row를 생성하는 엘리먼트 <tr> : <tr>의 개수에 따라 원하는 행의 개수가 만들어진다.
- column을 생성하는 엘리먼트 <td> : <td>의 개수에 따라 원하는 열의 개수가 만들어진다.
참고로 <table>엘리먼트 안에 들어있는 속성값 border="1"은 테이블에서 줄을 표시하는, 즉 테이블을 꾸미는 용도로 사용된 속성과 속성값이다. 위의 코드에 따라 테이블을 생성하면 아래와 같은 형태가 웹페이지 상에 나타나게 된다.
border="1"의 속성값이 입력되지 않은 두번째 table의 경우, 테이블이 만들어지긴 했지만 아무런 꾸밈이 없는 영역만으로 이루어진 테이블이 생성되었음을 알 수 있다.
웹페이지 상에 만든 테이블을 꾸미기 위해서는 <table border="1">과 같이 table의 속성을 이용해도 되지만 CSS를 활용하는 것이 훨씬 더 효율적이다. (해당 내용은 CSS관련 포스팅에서 다루도록 하자.)
<HTML 핵심 내용 요약>
html에서 꼭 짚고 넘어가야 할 핵심 포인트들을 다음과 같이 요약해 볼 수 있다.
- 엘리먼트의 속성과 속성값 파악하기.
- 해당 엘리먼트의 display가 블럭(block)형태인지, 인라인(inline)형태인지 파악하기
- 테이블(table) 그리기.
'HTML' 카테고리의 다른 글
| HTML의 기초(4) - <label> 엘리먼트 (0) | 2021.12.27 |
|---|---|
| HTML 응용(1) - element들 간의 관계, 이미지 삽입하기 (0) | 2021.12.22 |
| HTML 코드 (1)~(2) (0) | 2021.12.20 |
| HTML의 기초(2) - <a>, <input> element (0) | 2021.12.20 |
| HTML의 기초(1) - 기본 문법 <head>, <body> (0) | 2021.12.20 |