🔵 table

HTML 안에 표 만들기

• <table> : 테이블 선언
• <caption> : 표의 제목
• <tr> : 행 선언
• <th> : 열 선언 (헤더, 볼드체, 중앙정렬)
• <td> : 열 선언 (데이터)

<table>
	<caption>SCORE</caption>
	<tr> 
		<th>First Name</th>
        <th>Last Name</th>
        <th>Points</th>
    </tr>
    <tr>
        <td>Eve</td>
        <td>Jackson</td>
        <td>94</td>
    </tr>
    <tr>
        <td>John</td>
        <td>Haword</td>
        <td>70</td>
    </tr>
    <tr>
        <td>Bryan</td>
        <td>Kim</td>
        <td>30</td>
    </tr>
</table>

🔵 colspan

열 (column) 이 들어갈 폭을 지정

<table>
	<caption>9월</caption>
    <tr>
		<th colspan="7">9월 4주차</th>
    </tr>
    <tr>
        <td>21</td>
        <td>22</td>
        <td>23</td>
        <td>24</td>
        <td>25</td>
        <td>26</td>
        <td>27</td>
    </tr>
</table>

결과 이미지:

풀이:
1번째 <tr> 에 <colspan="7"> 이 적용됐기 때문에 1번째 열부터 7번째 열까지 합쳐진다.

🔵 rowspan

행 (row) 이 들어갈 폭을 지정

<table>
	<caption>9월</caption>
	<tr>
		<th>주차</th>
		<th>날짜</th>
	</tr>
	<tr>
		<td rowspan="7">4</td>
		<td>21</td>
	</tr>
	<tr>
		<td>22</td>
	</tr>
	<tr>
		<td>23</td>
	</tr>
	<tr>
		<td>24</td>
	</tr>
	<tr>
		<td>25</td>
	</tr>
	<tr>
		<td>26</td>
	</tr>
	<tr>
		<td>27</td>
	</tr>
</table>

결과 이미지:

풀이:
2번째 <tr> 에 <rowspan="7"> 이 적용됐기 때문에 2번째 행부터 7번째 행까지 합쳐진다.

---

테이블 만들기는 쉬우니까 수업시간에 했던 예제 풀이는 추가하지 않았다.