728x90
📌Table 테이블 구성 용
th (table header) : 카테고리, 제목
tr (talble row) : 행
td (table data) : 테이블 요소
caption : 테이블 제목
thead : table에서 머리
tbody : table에서 몸
tfoot : table에서
📌예제1 : 기본 table 만들기
<table border>
<caption>학생정보</caption>
<tr>
<th>이름</th>
<th>전화번호</th>
<th>이메일</th>
</tr>
<tr>
<td>김창수</td>
<td>010-0000-1111</td>
<td>이메일@주소</td>
</tr>
<tr>
<td>이아름</td>
<td>010-2222-3333</td>
<td>이메일@주소</td>
</tr>
</table>
이렇게 보면 쉽다. tr 3행 즉 3덩어리가 존재하고 맨위에 td(제목) 각각 3열, 그 밑에 td(내용) 3열씩 즉 3X3 table을 완성시킬 수 있다.
📌예제2 : table 스타일 적용하기
<style>
table{ border-collapse: collapse;}
caption{ margin-bottom: 10px; font-size: 20px; font-weight: 800;}
table,th,td{border: 1px solid black; }
th{ background-color: teal; color: white;}
th,td{ width: 120px; padding: 5px; text-align: center;}
</style><style>코드를 html <head>안에 넣어주면
| 이름 | 전화번호 | 이메일 |
|---|---|---|
| 김창수 | 010-0000-1111 | 이메일@주소 |
| 이아름 | 010-2222-3333 | 이메일@주소 |
📌예제3 : table 행, 열 합치기
<table>
<caption>과일 주문내역</caption>
<thead>
<tr>
<th>과일</th>
<th>수량</th>
<th>금액</th>
</tr>
<tr>
<td>복숭아</td>
<td>3</td>
<td>60,000</td>
</tr>
<tr>
<td>사과</td>
<td>10</td>
<td>40,000</td>
</tr>
<tr>
<td colspan='2'>총 주문 금액</td>
<td>100,000</td>
</tr>
</thead>
</table>
728x90
'열심히 코딩할래 > AI 해볼까' 카테고리의 다른 글
| [CSS] 수도선택자(Pseudo Selector) : 링크 꾸미기, 마우스 놓으면 바뀌게하기 (0) | 2023.04.07 |
|---|---|
| [CSS] 글씨 꾸미기, 글자 크기(font-size),폰트(font-family), font-style (0) | 2023.04.06 |
| [VS code] 비주얼스튜디오 다운로드, 셋팅, html 처음시작, html 기초 (0) | 2023.04.06 |
| [소스트리 Sourcetree] 소스트리 다운받기, 다운받을 때 주의해야할 것, 불러오기, 스테이징, 커밋, gitignore (0) | 2023.04.04 |
| [Github] 깃허브 사용자 등록, commit 코밋, log 확인, checkout (0) | 2023.04.04 |