table태그로 표를 생성할 수 있다.
table 태그의 여는태그에 속성을 부여할 수 있다.
border 속성은 표의 선굵기를 정의한다.
<table border="1">
<thead>
<tr>
<th>이름</th>
<th>국어</th>
<th>영어</th>
<th>수학</th>
</tr>
</thead>
<tbody>
<tr>
<td>김민수</td>
<td>92</td>
<td>82</td>
<td>72</td>
</tr>
<tr>
<td>이영희</td>
<td>83</td>
<td>84</td>
<td>85</td>
</tr>
</tbody>
</table>
예제) 시간표 만들기
colspan은 가로로, rowspan은 세로로 합치게 해주는 속성이다.
<h2>시간표 예제</h2>
<table border="1">
<thead
style="background-color: black; color: yellowgreen; font-size: 20px;"
>
<th>시간</th>
<th>월요일</th>
<th>화요일</th>
<th>수요일</th>
<th>목요일</th>
<th>금요일</th>
</thead>
<tbody>
<tr>
<td id="time">09:00 - 10:00</td>
<td colspan="5">1일1쿼리</td>
</tr>
<tr>
<td id="time">10:00 - 11:00</td>
<td rowspan="3">JS수업</td>
<td rowspan="3">프로젝트 작업</td>
<td rowspan="3">html수업</td>
<td rowspan="3">프로젝트 작업</td>
<td rowspan="3">mysql수업</td>
</tr>
<tr>
<td id="time">11:00 - 12:00</td>
</tr>
<tr>
<td id="time">12:00 - 13:00</td>
</tr>
<tr>
<td id="time">13:00 - 14:00</td>
<td colspan="5" style="font-size: 20px;">중식</td>
</tr>
<tr>
<td id="time">14:00 - 15:00</td>
<td rowspan="3">JS실습</td>
<td rowspan="3">프로젝트 작업</td>
<td rowspan="3">html실습</td>
<td rowspan="3">프로젝트 작업</td>
<td rowspan="3">mysql실습</td>
</tr>
<tr>
<td id="time">15:00 - 16:00</td>
</tr>
<tr>
<td id="time">16:00 - 17:00</td>
</tr>
<tr>
<td id="time">17:00 - 18:00</td>
<td colspan="5">블로그 정리</td>
</tr>
</tbody>
</table>
'HTML CSS' 카테고리의 다른 글
| html/css) css 선택자 selector (0) | 2025.05.28 |
|---|---|
| html/css) 시멘틱 태그 semantic tag (0) | 2025.05.28 |
| html/css) 속성 Attribute 활용 (0) | 2025.05.28 |
| html/css) 태그 tag 활용 (0) | 2025.05.28 |
| html/css, Javascript 기초개념 (0) | 2025.05.27 |