반응형
HTML 테이블 만들기
정리:
<table>: HTML에서 table을 만들기 위한 태그로 행과 열이 존재한다.
<tr>: 테이블의 열에 해당한다.(가로방향)
<td>: 테이블안에 데이터를 의미한다.
예시코드
<!DOCTYPE html>
<html>
<style>
table,th,tr,td{
border:2px solid red;
width:1000px;
}
</style>
<body>
<table>
<tr>
<th>PERSON 1</th>
<th>PERSON 2</th>
<th>PERSON 3</th>
</tr>
<tr>
<td>KOREA</td>
<td>JAPAN</td>
<td>CHINA</td>
</tr>
<tr>
<td>50,000,000</td>
<td>120,000,000</td>
<td>1,500,000,000</td>
</tr>
</table>
</body>
</html>위의 코드를 보면 테이블 맨 위의 이름을 PERSON 1,2,3으로 설정하고 그 하위 데이터(다음 열)에 국가와 인구 수를 적어넣었다.
여기서 만약 CSS(<style>)을 작성하지 않은채로 아래의 테이블만 입력하게 되면 어떠한 선이 없이 데이터들만 행과 열에 맞게 나타나는 것을 볼 수 있다.
이것을 좀더 예쁘게 테이블 형식으로 만들기위해서는 CSS를 이용해서 꾸밀 필요가 있다.
그래서 CSS를 통해 너비를 키우고 border를 통해 틀을 만들었다.
반응형
'웹프로그래밍 > HTML' 카테고리의 다른 글
| HTML 단락과 <br>,<pre> 사용법 (0) | 2023.09.04 |
|---|---|
| HTML Headings 수직선 입력 방법 (0) | 2023.09.04 |
| HTML 이미지 스타일 우선순위 (0) | 2023.09.04 |
| HTML 속성(예제코드) (0) | 2023.09.03 |
| HTML Links 링크 이미지, 주소 넣기 (0) | 2023.09.03 |
댓글