💾 테이블의 행, 열 합치기
<table border="1" width="300" height="200" align="center">
<tr bgcolor="yellow" align="center">
<td rowspan="2">1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td colspan="2" valign="baseline">5</td>
</table>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<table border="1" width="500" height="400">
<tr>
<td rowspan="3" bgcolor="pink" align="center">일</td>
<td colspan="3" bgcolor="yellow">이</td>
<tr>
<td colspan="2">삼</td>
<td rowspan="3" bgcolor="lightgreen" align="right">사</td>
</tr>
<tr>
<td bgcolor="orange">오</td>
<td bgcolor="cyan" align="center">육</td>
</tr>
<tr>
<td colspan="3" bgcolor="blue">
<font color="white" face="고딕" size="7"><strong>칠<strong></font>
</td>
</tr>
</table>
</body>
</html>
💾 colspan , rowspan 속성 - 행 또는 열 합치기
셀을 합치는 기능을 사용 하려면 <td>, <th> 테그 안에서 colspan, rowspan 속성을 사용해줍니다.
열 합치기 - colspan
<td colspan="합칠 셀의 개수"> 내용 </td>
<th colspan="합칠 셀의 개수"> 내용 </th>
행 합치기 - rowspan
<td rowspan="합칠 셀의 개수"> 내용 </td>
<th rpwspan="합칠 셀의 개수"> 내용 </th>
<td rowspan="3" bgcolor="pink" align="center">일</td>
: 행을 3칸 병합, 배경색은 본홍, 가운데정렬
<td colspan="2">삼</td>
: 열을 2칸 병합 하였다.
<font color="white" face="고딕" size="7"><strong>칠<strong></font>
: 글자색은 흰색, 글씨체 고딕, 크기는 7 , 글자 굵게 표현
'FRONT END > HTML' 카테고리의 다른 글
| 2일(06.29) 테이블 (table) (0) | 2022.07.02 |
|---|---|
| 2일(06.29) <a> / iframe (0) | 2022.07.02 |
| 1일(06.28) UTF-8 /image연결/ media연결/ <a> / text markup (0) | 2022.06.29 |
| 1일(06.28) HTML 실행/ 주석/<br>/ ul,ol,dl/ <hn> (0) | 2022.06.29 |
| 1일(06.28) HTML 설치 방법 (0) | 2022.06.28 |