html / 01 / 기초-3

순수한 표나, 게시판을 만들 때 👉 table태그

• 필수요소
  1. 행을 만들어주는 (줄을 그어주는) 👉 tr태그
  2. 열을 만들어주는 (제목을 컬럼을 작성) 👉 th태그(자동 가운데정렬 + 두껍게)
  3. 열을 만들어주는 (데이터를 작성) 👉 td태그
  4. 테이블 태그는 반드시 테두리를 작성해줘야 한다 !
  
  
  ※ 속성에 특정 내용을 작성할 때 빨간색으로 나오면
  👉 CSS를 사용하세요 ( ᵕ ̯ ᵕ̩̩ ) (권장사항이 아닙니다.)

<table border = "1px solid black" align = "center">

        <tr bgcolor = "yellow">
            <th>이름</th>
            <th>성별</th>
            <th>주소</th>    
        </tr>

        <tr align="center">
            <td>건호</td>
            <td>남자</td>
            <td>서울</td>
        </tr>
        
        <tr align="center">
            <td>민지</td>
            <td>여자</td>
            <td>제주도</td>
        </tr>
        
    </table>

th부분의 경우 글씨가 자동으로 굵게 + 가운데 정렬 되는걸 확인 가능 !

테이블(표)를 병합할때 👉 colspan태그, rowspan태그

• colspan : 가로방향 병합
• rowspan : 세로방향 병합

<table border="1px solid black">
        <tr bgcolor = "yellow">
            <th>이름</th>
            <th colspan="2">성별,주소</th>
            <th>직급</th>
        </tr>
        <tr>
            <td>건호</td>
            <td>남자</td>
            <td>서울</td>
            <td rowspan="2">선임</td>
        </tr>
        <tr>
            <td>민지</td>
            <td>여자</td>
            <td>서울</td>
        </tr>
    </table>

[❗] 만들기 전에 한번에 만들려고 하지말고, 몇줄 몇칸 필요한지
위에서 부터 순서대로 작업하면 좀 더 편합니다 !..

     <table border = "1px solid black">
        <tr bgcolor = "#858c92">
            <th rowspan="2">연도</th>
            <th colspan="3">순위</th>
        </tr>

        <tr bgcolor = "#858c92">
            <th>종합</th>
            <th colspan="2">정규</th>
        </tr>

        <tr align = "center">
            <td>1982</td>
            <td><b>4</b></td>
            <td>4</td>
        </tr>

        <tr align = "center" bgcolor = "#ea0029">
            <td>1983</td>
            <td><b>1</b></td>
            <td>2<br>(전기리그 1위)</td>
        </tr>
        <tr align = "center">
            <td>1984</td>
            <td><b>5</b></td>
            <td>5</td>
        </tr>
        <tr align = "center">
            <td>1985</td>
            <td><b>3</b></td>
            <td>3</td>
        </tr>
    </table>