<table> 태그를 이용해서 표 만들기!

 

오늘 만들어 본 페이지는 영화를 소개하는 페이지다.

 

---

우선 테이블에 대해서 알아보자!

<table> 태그에는 머리와 몸통인, <thead> <tbody> 가 존재한다.

 

<thead>에는 표의 중요한 것들, <tbody>에는 표의 내용들을 넣어준다고 생각하면 된다. 

 

 

한 행을 표시하는 <tr> 태그를 이용해서 행을 만들어준 뒤,

그 안에 넣어줄 데이터들은 <td> 태그를 이용해 넣어줄 수 있다.

 

 

 

 

---

💡표에 줄 넣어주기 

tr 태그는 한 줄, 행을 의미하고

td 태그는 그 줄 (tr)안에 가로로 ㅁ box를 만들어 낸다고 보면됨.

아래는 td가 4개가 있으니 하나의 tr에 ㅁㅁㅁㅁ 이렇게 4개의

데이터가 들어간다고 보면 됨.

 <table>
        <thead>
            <tr>
                <td>제목</td>
                <td>평점</td>
                <td>장르</td>
                <td>내용</td>
            </tr>
        </thead>
        <tbody></tbody>
    </table>

 

 

우선 thead에 tr태그를 이용해서 한줄을 넣어주고, td를 이용해서 네개의 데이터를 넣어줬다. 

그런데, 조금 더 정교한 테이블이었으면 좋겠다 싶어서 border을 이용해서 줄을 넣어줬다. 줄은 1픽셀로 설정!

 

 <!-- 표 만들기 -->
    <table border="1">
        <thead>
            <tr>
                <td>제목</td>
                <td>평점</td>
                <td>장르</td>
                <td>내용</td>
            </tr>
        </thead>
        <tbody></tbody>
    </table>

 

 

---

💡표에 행을 만들어서 원하는 만큼의 내용 삽입해주기

  <!-- 표 만들기 -->
    <table border="1">
        <thead>
            <tr>
                <td>제목</td>
                <td>평점</td>
                <td>장르</td>
                <td>내용</td>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>굿 윌 헌팅</td>
                <td>4.94</td>
                <td>성장</td>
                <td>한 청년의 아픔과 멘토를 통해 극복해나가는 성장스토리 </td>
            </tr>
            <tr>
                <td>기생충</td>
                <td>4.5</td>
                <td>스릴러</td>
                <td>자본주의 사회인 서울 도심에서 살아가는 두 개의 전혀 다른 계급의 충돌을 그려낸 영화</td>
            </tr>
            <tr>
                <td>노트북</td>
                <td>4.85</td>
                <td>로맨스</td>
                <td>한 남녀의 러브스토리</td>
            </tr
        </tbody>
    </table>

 

 

 

 

---

https://www.youtube.com/watch?v=wGb3iLIs3Og&list=PLyebPLlVYXCgc3S1HcqOMr5MOrt3wDlb-&index=8