초보개발자의 성장블로그
HTML 22 colspan과 rowspan으로 테이블의 셀 병합하기
프론트엔드/HTML2021. 3. 19. 11:33
표 제목 삽입
- <caption> 태그 사용
셀 병합
- rowspan : 셀을 세로로 병합, 속성값으로 병합하고 싶은 행의 수만큼 지정
- colspan : 셀을 가로로 병합, 속성값으로 병합하고 싶은 열의 수만큼 지정
| 이름 | 점수 |
|---|---|
| 홍민성 | 90 |
| 최민수 | 80 |
| 심은경 | 70 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<section>
<article>
<table border="1"style="width:50%">
<tr>
<th>이름</th>
<th>점수</th>
</tr>
<tr>
<td>홍민성</td>
<td>90</td>
</tr>
<tr>
<td>최민수</td>
<td>80</td>
</tr>
<tr>
<td>심은경</td>
<td>70</td>
</tr>
</table>
</article>
</section>
</body>
</html>| 1행 | 1행2열 |
|---|---|
| 2행 | 2행2열 |
| 3행2열 |
| 1열 | 2열 | |
|---|---|---|
| 2행1열 | 2행2열 | 2행3열 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<section>
<article>
<table border="1"style="width:50%">
<caption>행통합테이블</caption>
<tr>
<th>1행</th>
<td>1행2열</td>
</tr>
<tr>
<th rowspan="2">2행</th>
<td>2행2열</td>
</tr>
<tr>
<td>3행2열</td>
</tr>
</table>
</article>
</section>
<p></p>
<section>
<article>
<table border="1"style="width:50%">
<caption>열통합테이블</caption>
<tr>
<th>1열</th>
<th colspan="2">2열</th>
</tr>
<tr>
<td>2행1열</td>
<td>2행2열</td>
<td>2행3열</td>
</tr>
</table>
</article>
</section>
</body>
</html>| 가 | 나 | 다 | 라 |
| 마 | 바 | ||
| 사 | |||
| 아 | |||
| 자 | 차 | ||
| 카 | |||
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<section>
<article>
<table border="1"style="width:50%">
<tr>
<td>가</td>
<td>나</td>
<td>다</td>
<td rowspan="4">라</td>
</tr>
<tr>
<td>마</td>
<td colspan="2"rowspan="3">바</td>
</tr>
<tr>
<td>사</td>
</tr>
<tr>
<td>아</td>
</tr>
<tr>
<td colspan="2">자</td>
<td colspan="2">차</td>
</tr>
<tr>
<td colspan="4">카</td>
</tr>
</table>
</article>
</section>
</body>
</html>오늘의 날씨
| 지역 | 현재기온 | 불쾌지수/습도(%) | 풍속(m/s) | |
|---|---|---|---|---|
| 서울/경기 | 23 | 60 | 80 | 4.7 | 20 | 60 | 80 | 5.0 |
| 제주도 | 21 | 65 | 85 | 3.6 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
table, th, tr, td{
border:solid 1px black;
/* collapse : 표(table)의 테두리와 셀(td)의 테두리 사이의 간격을 없앱니다.
겹치는 부분은 한 줄로 나타냅니다. */
border-collapse: collapse;
padding:8px;
}
</style>
</head>
<body>
<h3>오늘의 날씨</h3>
<table>
<tr>
<th>지역</th>
<th>현재기온</th>
<th colspan="2">불쾌지수/습도(%)</th>
<!-- <th>습도(%)</th> -->
<th>풍속(m/s)</th>
</tr>
<tr>
<td rowspan="2">서울/경기</td>
<td>23</td>
<td>60</td>
<td>80</td>
<td>4.7</td>
</tr>
<!-- <td>경기도</td> -->
<td>20</td>
<td>60</td>
<td>80</td>
<td>5.0</td>
</tr>
<tr>
<td>제주도</td>
<td>21</td>
<td>65</td>
<td>85</td>
<td>3.6</td>
</tr>
</table>
</body>
</html>'프론트엔드 > HTML' 카테고리의 다른 글
| HTML 24 <input type="password"> 태그로 비밀번호 입력 창 만들기 (0) | 2021.03.19 |
|---|---|
| HTML 23 <input type="text"> 태그로 텍스트 입력 창 만들기 (0) | 2021.03.19 |
| HTML 21 <table>,<tr>,<th>,<td> 태그로 테이블 만들기 (0) | 2021.03.19 |
| HTML 20 <video> 태그로 비디오 파일 재생하기 (0) | 2021.03.18 |
| HTML 19 <audio>태그로 오디오 파일 재생하기 (0) | 2021.03.18 |
댓글()