본문 바로가기
Web/HTML 기본 개념

[HTML]테이블 열,행 합치기

by 박 현 황 2021. 3. 5.
rowspan 셀의 높이 지정
colspan 셀의 너비 지정

 

현재 기본적인 구조

더보기 
<!DOCTYPE html>
<html lang="ko">
<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>
    <table border="1" style="font-size: 100px; margin-left: 500px; margin-top: 100px;">
        <tr>
            <td>1</td>
            <td>2</td>
        </tr>
        <tr>
            <td>3</td>
            <td>4</td>
        </tr>
    </table>
</body>
</html>

 

1. 세로로 합치기

<!DOCTYPE html>
<html lang="ko">
<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>
    <table border="1" style="font-size: 100px; margin-left: 500px; margin-top: 100px;">
        <tr>
            <td rowspan="2">1</td>
            <td>2</td>
        </tr>
        <tr>
            
            <td>4</td>
        </tr>
    </table>
</body>
</html>

<td>1</td>에서 rowspan = 2로 주어서 1과 3을 합쳤다.(2칸 합치기) 그리고 3은 지워주었다.

 

 

 

 

<!DOCTYPE html>
<html lang="ko">
<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>
    <table border="1" style="font-size: 100px; margin-left: 500px; margin-top: 100px;">
        <tr>
            <td>1</td>
            <td rowspan="2">2</td>
        </tr>
        <tr>
            <td>3</td>
            
        </tr>
    </table>
</body>
</html>

2와 4를 합쳐주고 싶을 때는 <td>2</td> 부분에 rowspan을 주어서 뒤에 있는 2개 끼리 합쳐지도록 하였다.

 

2.가로로 합치기

 

 

<!DOCTYPE html>
<html lang="ko">
<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>
    <table border="1" style="font-size: 100px; margin-left: 500px; margin-top: 100px;">
        <tr>
            <td colspan="2">1</td>
            
        </tr>
        <tr>
            <td>3</td>
            <td>4</td>
        </tr>
    </table>
</body>
</html>

<td>1</td> 부분에서 colspan = 2를 주어서 1과 2를 합쳐주었다. (2칸 합치기) 그리고 2를 지워주면 위의 사진과 같이 나타난다.

 

 

 

 

이력서 테이블 만들어보기

 

<!DOCTYPE html>
<html lang="ko">
<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>
    <table border="2">
        <caption>이력서</caption>
        <tr>
            <td rowspan="3">사진</td>
            <td rowspan="2">성명</td>
            <td rowspan="2">홍길동</td>
            <td colspan="2">주민번호</td>
        </tr>
        <tr>
            <td colspan="4">000000-0000000</td>
        </tr>
        <tr>
            <td colspan="4">생년 월일 2000년 01월 01일</td>
        </tr>
        <tr>
            <td>주소</td>
            <td colspan="4">서울시 강남구 역삼동</td>
        </tr>
        <tr>
            <td rowspan="2">연락처</td>
            <td>집</td>
            <td>02-111-1111</td>
            <td rowspan="2">이메일</td>
            <td rowspan="2">hong@gmail.com</td>
        </tr>
        <tr>
            <td>핸드폰</td>
            <td>010-0000-0000</td>
        </tr>
    </table>
</body>
</html>

 

 

 

일단 칸을 모두 하나하나 나눠서 작성하면 보다 쉽게 작성할 수 있다.

이 표를 가로와 세로로 하나씩 자르는 것이다.

이런 식으로 가로와 세로로 모두 나누어보면 세로로 6칸 가로로 5칸인 것을 확인할 수 있고

<tr><td>에 무엇을 넣어야 할 지 쉽게 알 수있다.

 

따라서 위 표와 같이 일단 값을 먼저 넣어놓은 후 rowspan과 colspan을 적용하면 쉽다.

저작자표시 비영리 동일조건

'Web > HTML 기본 개념' 카테고리의 다른 글

[HTML]입력양식 태그  (1) 2021.03.05
[HTML]이미지, 오디오 , 비디오 삽입하기  (0) 2021.03.05
[HTML]테이블 태그  (0) 2021.03.05
[HTML]글자 태그(2)  (0) 2021.03.02
[HTML]글자 태그(1) - h 태그  (0) 2021.03.02

관련글

티스토리툴바