728x90
더보기
Day36. 230620
colspan, rowspan 속성
- 행 또는 열 합치기
colspan
- 여러 열을 하나로 합치기
<td colspan="합칠 셀의 개수"> 내용</td>
<th colspan="합칠 셀의 개수"> 내용</th>
rowspan
- 여러 행을 하나로 합치기
<td rowspan="합칠 셀의 개수"> 내용</td>
<th rowspan="합칠 셀의 개수"> 내용</th>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>table태그</title>
</head>
<body>
<h2>table태그</h2>
<!-- 속성
<table border="테두리두께"
width="너비%px" height="높이%px"
align="left | center | right"
bgcolor="색상명" -->
<table border="1" width="400" height="320" align="center" bgcolor="red">
<caption>표제목</caption>
<tr bgcolor="orange">
<th align="left" bgcolor="yellow">컬럼명1</th>
<th align="right">컬럼명2</th>
<th>컬럼명3</th>
<th>컬럼명4</th>
</tr>
<tr align="left">
<td colspan="2">1-1</td>
<td>1-3</td>
<td>1-4</td>
</tr>
<tr align="right">
<td rowspan="2">2-1</td>
<td>2-2</td>
<td>2-3</td>
<td>2-4</td>
</tr>
<tr align="center">
<td>3-2</td>
<td colspan="2" rowspan="2">
<!-- 안쪽테이블 시작 -->
<table>
<tr><td>안쪽테이블</td></tr>
</table>
<!-- 안쪽테이블 끝 -->
</td>
</tr>
<tr>
<td>4-1</td>
<td>4-2</td>
</tr>
</table>
</body>
</html>
-> 1-1에서 두 개의 행 합치기
2-1에서 두 개의 열 합치기
3-3위치에서 두 개의 행,열 합치고 안쪽 테이블 만들기
background 색상은 red(원래 테이블 색상은 투명. 흰색 아님.)
728x90
'개발 수업 > WEB' 카테고리의 다른 글
| [HTML] 이미지, 절대경로와 상대경로 (0) | 2023.06.20 |
|---|---|
| [HTML] 링크만들기 (0) | 2023.06.20 |
| [HTML] 표를 만드는 태그 (0) | 2023.06.19 |
| [HTML] HTML 기본 구조,텍스트 관련 태그들 (0) | 2023.06.19 |
| [Web] eclipse JSP 개발 환경 설정 (0) | 2023.06.19 |
