[Web] day32 : table 태그를 활용하여 표 만들기

2023.06.20.화

table 태그를 활용하여 표 만들기

 

<table> 태그를 이용하면 표를 만들 수 있다

<th> 강조

<td> 태그는 표의 열을 나타내며, <tr> 태그 하위에 위치한다

• colspan은 <td>태그에서 사용하며, 열 확장(좌우)
• rowspan은 <td>태그에서 사용하며, 행 확장(상하)

 

이름	점수
티모	97
아리	23

<table border ="1">
	<tr>
	<td>이름</td><td>점수</td>
	</tr>
	<tr>
	<td>티모</td><td>97</td>
	</tr>
	<tr>
	<td>아리</td><td>23</td>
	</tr>

</table>

 

롤 챔피언 목록
탑	가렌
	티모
미드	아리
	제드

	<table class = "content" border="1">
		<tr>
			<th colspan="2" class="bg_yellow">롤 챔피언 목록</th>
		</tr>

		<tr>
			<th rowspan="2">탑</th>
			<td>가렌</td>
		</tr>
		
		<tr>
			<td>티모</td>
		</tr>

		<tr>
			<th rowspan="2">미드</th>
			<td>아리</td>
		</tr>
		
		<tr>
			<td>제드</td>
		<tr>
		
	</table>