[HTML 기초] 테이블 태그

IT/HTML 및 CSS

by SINAFLA 2021. 3. 21. 14:51

HTML을 하다보면 굉장히 많이 사용되는 태그 중 하나인 <table> 태그가 있다. 표로 만들어주는 HTML 태그인데, 표 뿐만 아니라 갤러리를 만들 수도 있고 지금은 잘 사용하지 않지만 웹 사이트 전체의 레이아웃 고강간을 배치할 때 사용됐다.

테이블 만들기

주제	태그	비고
테이블의 구성 요소	<table>	테이블을 만드는 태그
	<th>	테이블의 헤더부분을 만드는 태그
	<tr>	테이블의 행을 만든느 태그
	<td>	테이블의 열을 만드는 태그

테이블을 만드는 순서는 다음과 같다. <table></table> 태그가 시작되고, <table> 태그 안쪽에 <th> 태그와 다른 태그를 이용해서 작성한다. 테이블의 헤드 부분을 <th> 태그를 이용해 구분 짓는다.

<!DOCTYPE PUBLIC contentType="text/html; charset="utf-8">
<html>
<head>
<meta charset="utf-8">
<title>초간단 테이블</title>
</head>
<body>
    <table border="1">
	<th>테이블</th>
	<th>만들기</th>
	<tr><!-- 첫번째 줄 시작 -->
	    <td>첫번째 칸</td>
	    <td>두번째 칸</td>
	</tr><!-- 첫번째 줄 끝 -->
	<tr><!-- 두번째 줄 시작 -->
	    <td>첫번째 칸</td>
	    <td>두번째 칸</td>
	</tr><!-- 두번째 줄 끝 -->
    </table>
</body>
</html>

실행결과

테이블 디자인 변경

주제	속성	비고
테이블 디자인 변경	border	테이블의 테두리
	bordercolor	테이블의 테두리 색상
	width	테이블의 가로 크기
	height	테이블 세로 크기
	align	정렬
	bgcolor	배경색
	colspan	가로 병합 (열 병합)
	rowspan	세로 병합 (행 병합)

예제 소스

<!DOCTYPE content-Type="text/html; charset=utf-8">
<html>
<head>
<meta charset="utf-8">
<title>Table</title>
    <style>
        table, th, td, tr {
            border: 1px solid black;
            border-collapse:collapse;
        }
    </style>
</head>
<body>
    <table style="width:500px; height:200px; text-align: center;">
        <tr>
            <th colspan="3">오늘의 글쓰기</th>
        </tr>
        <tr>
            <th>주제</th>
            <th>내용</th>
            <th>첨삭</th>
        </tr>
        <tr>
            <td rowspan="2">애국가</td>
            <td>동해물과 백두산이 마르고 닳도록</td>
            <td>-</td>
        </tr>
        <tr>
            <td>하느님이 보우하사 우리나라 만세</td>
            <td>-</td>
        </tr>
    </table>
</body>
</html>

실행 결과

'IT > HTML 및 CSS' 카테고리의 다른 글

[HTML 기초] 링크 만들기 (0)	2021.03.30
[HTML 기초] 목록을 만드는 태그 (0)	2021.03.29
[HTML 기초] 텍스트를 한 줄로 표시하는 태그 (0)	2021.03.28
[HTML 기초] 테스트를 덩어리로 묶어 주는 태그 (0)	2021.03.27
[HTML 기초] HTML의 기본 개념 이해하기 (0)	2021.03.18