[HTML/CSS] 표 그리기 <table> <tr> <th> <td> border 테두리

제목1	제목2
내용1	내용2
ㅎㅎ	ㅋㅋ

웹개발을 하다보면 빠질 수 없는게 저러한 형태의 표. 테이블이다.

 

게시판 뭐 뭐 아무튼 등등 많이 쓰이는데 아무튼 잘 모르겠고 알아보자.

<table border="1">
    <tr>
        <th>제목1</th>
        <th>제목2</th>
    </tr>
    <tr>
        <td>내용1</td>
        <td>내용2</td>
    </tr>
    <tr>
        <td>ㅎㅎ</td>
        <td>ㅋㅋ</td>
    </tr>
</table>

맨 위에 테이블은 위에 코드로 작성했다.

html은

1행 : <table border="1">

<table>은 뭐 테이블을 의미한다. 표. border="1" border는 테두리 선을 그려준다. 굵기를 1로 잡아줬다.

border를 빼고 작성하면 아래와 같이 그려진다.

제목1	제목2
내용1	내용2
ㅎㅎ	ㅋㅋ

2행 : <tr>

 th나 td가 안에 들어갈 수 있으며 한 행을 의미한다. 위에는 <tr>을 세개를 작성해서 총 3행이 있다.

3, 4행 : <th> table의 head 제목이다. <tr>안에 <th를 두개 작성하여 열이 두 열이다.

즉 3행 2열 테이블이다.

 

7, 8행 : <td> table의 내용이다.