HTML-9

최광희·2024년 2월 18일

html

HTML

목록 보기

9/12

HTML 기본 요소-7

HTML 테이블

HTML 테이블(Table)

테이블(Table)이란 여러 종류의 데이터(data)를 보기 좋게 정리하여 보여주는 표를 의미한다.
HTML에서는 <table>태그를 사용하여 이러한 테이블을 작성할 수 있다.
<table>태그는 다음과 같은 태그들로 구성된다.

<tr>태그는 테이블에서 열을 구분해 준다.
<th>태그는각 열의 제목을 나타내며, 모든 내용은 자동으로 굵은 글씨에 가운데 정렬이 된다.
<td>태그는 테이블의 열을 각각의 셀(cell)로 나누어 준다.

<table style="width:100%">
    <tr style="background-color:lightgrey">
        <th>참치</th>
        <th>고래</th>      
    </tr>
    <tr>
        <td>상어</td>
        <td>문어</td>
    </tr>
    <tr>
        <td>오징어</td>
        <td>고등어</td>
    </tr>
</table>

참치	고래
상어	문어
오징어	고등어

CSS의 border 속성을 이용하여 테이블에 테두리를 표현할 수 있다.
border 속성값을 따로 명시하지 않으면, 해당 테이블은 언제나 빈 테두리를 가지게 된다.
```
<head>
<meta charset="UTF-8">
<title>HTML Tables</title>
<style>
	table, th, td { border: 1px solid black }
</style>
```

<h1>다양한 테이블 테두리</h1>
<table style="width:100%">
	<tr style="background-color:lightgrey">
		<th>참치</th>
		<th>고래</th>		
		<th>날치</th>
	</tr>
	<tr>
		<td>상어</td>
		<td>문어</td>		
		<td>꽁치</td>
	</tr>
	<tr>
		<td>오징어</td>
		<td>고등어</td>		
		<td>돌고래</td>
	</tr>
</table>

위의 예제에서 테이블의 테두리(border)가 두 줄씩 나타나는 이유는 <table>태그와 <th>태그, <td>태그가 모두 자신만의 테두리를 가지고 있기 때문이다.
위와 같이 두 줄로 표현되는 테두리를 한 줄로 설정하려면 border-collapse 속성을 사용해야 한다.

테이블의 열 합치기

colspan 속성을 사용하면 테이블의 열(column)을 합칠 수 있습니다.

<table style="width:100%">
    <tr>
        <td>참치</td>
        <td colspan="2">고래</td>        
    </tr>
    <tr>
        <td>상어</td>
        <td>문어</td>        
        <td>꽁치</td>
    </tr>
</table>

참치	고래
상어	문어	꽁치

테이블의 행 합치기

rowspan 속성을 사용하면 테이블의 행(row)을 합칠 수 있습니다.

<table style="width:100%">
    <tr>
        <td rowspan="2">상어</td>
        <td>문어</td>        
        <td>꽁치</td>
    </tr>
    <tr>
        <td>고등어</td>        
        <td>돌고래</td>
    </tr>
</table>

상어	문어	꽁치
고등어	돌고래

테이블의 열과 행 합치기

colspan 속성과 rowspan 속성을 함께 사용하면, 더욱 복잡한 테이블도 표현할 수 있습니다.

<table style="width:100%">
    <tr>
        <td colspan="6">1</td>
    </tr>
    <tr>
        <td colspan="6">2</td>
    </tr>
    <tr>
        <td rowspan="3">3</td>
        <td rowspan="3">4</td>
        <td colspan="2">5</td>
        <td>6</td>
        <td>7</td>
    </tr>
    <tr>
        <td colspan="3">8</td>
        <td>9</td>
    </tr>
    <tr>
        <td colspan="4">10</td>
    </tr>
</table>

1
2
3	4	5	6	7
8	9
10

테이블의 캡션(caption) 설정

<caption>태그를 사용하면 테이블 상단에 제목이나 짧은 설명을 붙일 수 있습니다.

<table style="width:100%">
    <caption>해양 생물</caption>
    <tr>
        <td>참치</td>
        <td>고래</td>
        <td>날치</td>    
    </tr>
</table>

해양 생물
참치	고래	날치

최광희

나는 사람들을 치료해주는 '약'과 같은 존재가 되고 싶다.

이전 포스트

HTML-8

다음 포스트