TIL] table

table

table은 표를 만들어주는 html태그이다.

표뿐만 아니라 갤러리도 만들 수 있고

다양하게 응용이 가능한 태그이다.

---

테이블의 구성 요소

테이블은 여러 가지 구성요소가 있다.

아래에서 살펴보자

1. <table> : 테이블을 만드는 태그
2. <th> : 테이블의 헤더 부분을 만드는 태그
3. <tr> : 테이블의 행을 만드는 태그
4. <td> : 테이블의 열을 만드는 태그

테이블을 만들 때는 순서가 있다.

테이블의 순서는 다음과 같다.

제일 바깥 쪽에 <table></table>이 들어가게 되고

가장 위에 <th>라는 테이블 헤더 태그를 사용한다.

그다음은 행을 만드는 <tr> 태그가 들어가게 되고

tr태그 안에는 열을 만들어주는 <td> 태그가 들어가게 된다.

테이블 코드 블록

<table border = "1">
    <th>테이블예제</th>
    <th>입니다.</th>
    <tr>
        <td>1번칸</td>
        <td>2번칸</td>
    </tr>
    <tr>
        <td>2번줄 1번칸</td>
        <td>2번줄 2번칸</td>
    </tr>
</table>

위의 예제처럼 코딩을 하게 되면 아래와 같이 표시된다.

테이블예제	입니다.
1번칸	1번칸
2번칸	2번칸

---

테이블의 속성

테이블의 속성은 다음과 같다.

1. border : 테이블의 테두리를 설정해 준다. border = "숫자의 크기가 높을수록 테두리가 두꺼워진다."
2. bordercolor : 테두리의 색상을 지정하는 속성이다. 기본 값은 검은색이다.
3. width와 height : 테이블의 크기를 설정할 수 있는 속성
4. align : 테이블 안에 있는 값들을 정렬시키는 속성
5. bgcolor : 태그의 배경색을 지정해줄 수 있다.
6. colspan, rowspan : 셀을 합병시키는 속성이다.

---

테이블은 여러모로 유용하게 쓰이는 것 같다.

제대로 숙지하고 있어야 할 것 같다.

항상 의문이 들었던 것을 정리하기 위해 공부를 하는데

확실하게 많이 도움이 되는 것 같다!

또한 의문이 드는 게 많기 때문에

좋은 개발자가 되기 위해 정말 열심히 달려야 할 것 같다!

파이팅!