[HTML]테이블 만들기 , 테이블 병합하기

<table>을 이용해 테이블 만드는 것을 배웠다

테이블은 셀 간격이 일정하기때문에

게시판을 만들거나 메뉴 만드는 등 여러곳에서 활용이 가능하다

<tr> : 행 (세로)

<td> : 열 (가로)

행,열 항상 헷갈림 ,,,

외곽선을 만들기 위해 table 과 td 같이 border을 적용하면

위에 있는 사진처럼 선이 2겹으로 나타난다

border-collapse: collapse 를 적용하면 한줄만 보인다

<th>는 제목 넣을떄 사용하는 태그로 텍스트가 굵게 표시된다

제목부분에는 셀을 나누는 선이 그려져있지 않은데

th부분에는 스타일 지정이 안되어있는 걸 확인할 수 있다

선택자 - 태그 한번에 만들기

table>tr*3>td*3

테이블 밑에 tr세개 그 안에 또 td세개

셀 병합하기 (rowspan, colspan

rowspan : 세로병합

colspan : 가로병합

병합이 시작되는 셀에서 입력해준다

<td rowspan="2"> 숫자는 합치는 셀의 숫자

2개를 병합했으면 다음 <td>는 병합된 상태이므로 텍스트를 지워준다

표만들기

<style>
    table,td{
        border:1px solid gray;
        width: 800px;
        height: 60px;
        text-align: center;
        border-collapse: collapse;
    }
    th{
        height: 50px;
        font-size: 20px;
    }
    div{
        background-color: pink;
        border-radius:30px;
        line-height: 30px;
        color:orangered;
        border:2px solid black;
        margin: 10px;
        }
        .col1, .col2 {
            width:25%
        }
        .col3{
            width:20%;
        }

</style>
<body>
    <table>
        <tr>
            <th>수강레벨</th>
            <th class="col1">코스 A</th>
            <th class="col2">코스 B</th>
            <th>수강기간</th>
            <th class="col3">세부내용보기</th>
           
        </tr>
        <tr>
            <td>레벨 1</td>
            <td>Side by side 1</td>
            <td>Amrican Headway 1</td>
            <td>1개월</td>
            <td><div>세부내용보기</div></td>
      
        </tr>
        <tr>
            <td>레벨 2</td>
            <td>Side by side 2</td>
            <td>Amrican Headway 2</td>
            <td>1개월</td>
            <td><div>세부내용보기</div></td>
        </tr>
        <tr>
            <td>레벨 3</td>
            <td>Side by side 3</td>
            <td>Amrican Headway 3</td>
            <td>1개월</td>
            <td><div>세부내용보기</div></td>
        </tr>
        <tr>
            <td>레벨 4</td>
            <td colspan="2">Exploring English 1</td>
            
            <td>2개월</td>
            <td><div>세부내용보기</div></td>
        </tr>
        <tr>
            <td>레벨 5</td>
            <td colspan="2">Exploring English 2</td>
           
            <td>2개월</td>
            <td><div>세부내용보기</div></td>
        </tr>
    </table>

세부내용보기 부분을 만드는 게 좀 어려웠다

<div>로 묶은 내용에 백그라운드 컬러를 넣어주고

border radius 를 이용해 테두리가 둥근 모양을 만들어주었다

티스토리툴바