[TIL] HTML ㅡ table 만들기

 

🌷Web에 Table로 표 만들기 

---

HTML에서 표를 만들어주는 <table> 태그에 대해 공부해 볼게요 오늘 😎

테이블을 구성할 때는 거의 아래 네개의 태그를 사용해 줍니다 

 

• <table> : 테이블 자체를 만드는 태그
• <th> : 테이블의 헤더부분을 만드는 태그 
• <tr> : table row 라고 하며, 태이블의 행을 만드는 태그 
• <td> : table data 라고 하며, 테이블의 열을 만드는 태그

 

 

 

VS code에 요런 코드를 쳐주면 아래와 같은 표가 완성 됩니다 

<th> 헤더부분에 넣어준 일정, 준비물의 경우 스스로 bold체로 표시되는게 다른점인듯 

 

 

 

 

HTML에서 꾸며줄 때는 <table border="1"> 이런식의 코드를 작성해 주면 되는데, 살짝 촌스러운 감이 있어서 

저는 포스팅을 위해 CSS로 스타일을 조금 가미해 주었습니다

 

테이블 디자인을 변경할 때는 아래 속성들을 사용하면 되고, table 만드는 것은 코드 한번만 쳐보면 쏙쏙 이해가 되기 때문에 모두 실습해 보도록해요 

 

태그	내용
border :	테이블의 테두리
bordercolor :	테이블 테두리의 색상
width :	테이블의 가로 크기
height :	테이블의 세로 크기
align :	정렬
bgcolor :	배경색
colspan :	가로 합병
rowspan :	세로 합병