[html5 태그 권장사항] 각 각의 셀을 정의하는 부분에서는 <thead><tbody>등 헤더명에는 t를 붙여준다.
<table>
<thead> // thead로 표시함
<tr>
<th>연봉</th> // 대표가되는 항목들에는 <tr 태그안에 th 사용>으로 표시
<th>월실수령액</th>
<th>공제액(세금)</th>
</tr>
</thead>
<tbody>
<tr>
<td>7,400만원</td> //tbody안에 내용은 다시 td를 쓴다.
<td>5,031,896</td>
<td>1,134,770</td>
</tr>
<tfoot> //총합계등 결과에 대한형식은 tfoot으로 나타냄
<tr>
<td> 총 합계 </td> <td>7400만원 </td>
</tr>
</tfoot><thead> - 헤더가 될 제목을 정의
<tbody> - 헤더가 될 내용을 정의
<tfoot> - 헤더가 될 합계나 결과를 정의함
| 상세 정보 | |||
| 항목 | 1 | 2 | 3 |
| 4 | 5 | 6 | |
| 7 | 8 | 9 | |
[실습예제 - 수정 전]
<body> <table>
<tr>
<td>연봉</td> <td>월실수령액</td> <td>공제액(세금)</td>
</tr>
<tr>
<td>7,400만원</td> <td>5,031,896</td> <td>1,134,770 </td>
</tr>
<tr>
<td>9,200만원 </td> <td>6,031,916</td> <td>1,634,750 </td>
</tr>
<tr>
<td>1억1000만원</td> <td>7,026,126</td> <td>2,140,540 </td>
</tr>
<tr>
<td>1억3400만원</td> <td>8,001,246</td> <td>3,165,420 </td>
</tr>| 연봉 | 월실수령액 | 공제액(세금) |
| 7,400만원 | 5,031,896 | 1,134,770 |
| 9,200만원 | 6,031,916 | 1,634,750 |
| 1억1000만원 | 7,026,126 | 2,140,540 |
| 1억3400만원 | 8,001,246 | 3,165,420 |
[실습예제 - 수정 후]
<thead> 각각의 셀을 정의 하는 부분
<tbody> 실제 내용을 정의함 <tr> <td> 그대로 둠
table - border 값 변경 후 적용
table - 추가 변경사항
테이블 색변경으로 등으로 추가
border: 1px solid black;
가운데 정렬 용도로 추가
margin-left:auto;
margin-right:auto;
넓이 늘림
width:400px;
실습결과
td - 추가 변경사항
선 굵기및 색 변경
border:1px solid black;
글자색변경
color:darkblue;
글자크기 / 글자체 변경
font-size:12px , font-family:gulim;
글자 가운데 정렬하기
text-align:center;
결과확인 - 연봉 / 월실수령액 / 공제액(세금)은 추가사항이 미적용됨 확인
아래와같이 수정하기 td에 td,tr로 2개 지정 가능함
결과확인
테이블에서 간격을 없애기
border-collapse: collapse;
[실습예제 - 최종결과]
오늘은 여기까지입니다.
감사합니다.
====================================================
출처: IT UP, 코딩이 처음이어도 괜찮아! 진짜 입문자를 위한 웹개발과 IT 기초 지식
https://itup.co.kr/rv1/k-digital/main/lecture/info?course_uid=912417&education_uid=52212
잔재미코딩
'프론트엔드개발 > HTML,CSS,JS' 카테고리의 다른 글
| [CSS]step.7 style 태그를 CSS파일로 따로 관리하기 (0) | 2024.06.21 |
|---|---|
| [CSS]step.6 CSS 색상 표기 방법 padding/color/color-background (0) | 2024.06.21 |
| [CSS]step.4 크롬개발자모드/css 박스모델 (0) | 2024.06.19 |
| [CSS]step.3 <style type><div> 실습예제 (0) | 2024.06.19 |
| [CSS]step.2 <style type> font-szie / font-family / text-align 태그 적용하기 (0) | 2024.06.17 |
