웹프로그래밍/HTML

HTML 테이블,셀 사용법 <table>, <th>,<td>, <tr>

유노brain 2023. 9. 4. 12:37
반응형

HTML 테이블 만들기

정리:
<table>: HTML에서 table을 만들기 위한 태그로 행과 열이 존재한다.
<tr>: 테이블의 열에 해당한다.(가로방향)
<td>: 테이블안에 데이터를 의미한다.

 

예시코드

<!DOCTYPE html>
<html>
<style>
    table,th,tr,td{
        border:2px solid red;
        width:1000px;
    }
</style>


    <body>
        <table>
            <tr>
                <th>PERSON 1</th>
                <th>PERSON 2</th>
                <th>PERSON 3</th>
            </tr>
            <tr> 
                <td>KOREA</td>
                <td>JAPAN</td>
                <td>CHINA</td>
            </tr>
            <tr>
                <td>50,000,000</td>
                <td>120,000,000</td>
                <td>1,500,000,000</td>
            </tr>
        </table>
    </body>
</html>

위의 코드를 보면 테이블 맨 위의 이름을 PERSON 1,2,3으로 설정하고 그 하위 데이터(다음 열)에 국가와 인구 수를 적어넣었다.

 

여기서 만약 CSS(<style>)을 작성하지 않은채로 아래의 테이블만 입력하게 되면 어떠한 선이 없이 데이터들만 행과 열에 맞게 나타나는 것을 볼 수 있다.

 

이것을 좀더 예쁘게 테이블 형식으로 만들기위해서는 CSS를 이용해서 꾸밀 필요가 있다.

그래서 CSS를 통해 너비를 키우고 border를 통해 틀을 만들었다.

 

 

반응형