๋ณธ๋ฌธ ๋ฐ”๋กœ๊ฐ€๊ธฐ

๐ŸŒ HTML\CSS

Table(ํ…Œ์ด๋ธ”)๊ณผ colspan, rowspan

by Meteora_ 2021. 2. 24.
728x90

<Table> : ํ…Œ์ด๋ธ”

<th> : ํ…Œ์ด๋ธ” ํ—ค๋“œ

<tr> : ํ…Œ์ด๋ธ” row

<td> : ํ…Œ์ด๋ธ” data

 

colspan : ์ปฌ๋Ÿผ ๋ณ‘ํ•ฉ

rowspan : ๋กœ์šฐ(์—ด) ๋ณ‘ํ•ฉ

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>

<!-- Table : row(ํ–‰), column(์—ด) -->

 <!-- <table border="1" style="width : 50%"> ์›น ํ™”๋ฉดํญ์˜ 50% -->
 
 <div align="center">
 
 <table border="2">
<col width="50"><col width="100"><col width="200"><col width="50"> <!-- ์ปฌ๋Ÿผ ๋„ˆ๋น„ -->
<tr>
<th>๋ฒˆํ˜ธ</th> 
<th>์„ฑ</th>
<th>์ด๋ฆ„</th>
<th>๋‚˜์ด</th>
</tr>

<tr>
<th>1</th> 
<td>ํ™</td>
<td>๊ธธ๋™</td>
<td align="center">20</td>
</tr>

<tr>
<th>2</th> 
<td>์„ฑ</td>
<td>์ถ˜ํ–ฅ</td>
<td align="center">21</td>
</tr>

</table>


</div>

<br><br>

<!-- column ๋ณ‘ํ•ฉ (colspan)   -->

<table border="1" style="width:50%">
	<caption>์ฃผ์†Œ๋ก</caption>
	
	<tr>
		<th>๋ฒˆํ˜ธ</th><th>์ด๋ฆ„</th><th>๋‚˜์ด</th><th colspan="2">์ „ํ™”๋ฒˆํ˜ธ</th>
	</tr>
	
	<tr>
		<td>1</td><td>ํ™๊ธธ๋™</td><td>24</td><td>123-4567</td><td>2345-5678</td>
	</tr>

</table>

<br>


<!-- row ๋ณ‘ํ•ฉ (rowspan) -->

<table border="1">
<caption>์ฃผ์†Œ๋ก</caption>
	<tr>
		<th>๋ฒˆํ˜ธ</th>
		<td>1</td>
	</tr>
	
	<tr>
		<th>์ด๋ฆ„</th>
		<td>๊ธธ๋™</td>
	</tr>
	
	<tr>
		<th>๋‚˜์ด</th>
		<td>24</td>
	</tr>

	<tr>
		<th rowspan="2">์ „ํ™”๋ฒˆํ˜ธ</th>
		<td>123-4567</td>
	</tr>
	
		<tr>
		<td>234-5678</td>
	</tr>

</table>


</body>
</html>

 

๊ฒฐ๊ณผ๋ฌผ -

์ €์ž‘์žํ‘œ์‹œ

'๐ŸŒ HTML\CSS' ์นดํ…Œ๊ณ ๋ฆฌ์˜ ๋‹ค๋ฅธ ๊ธ€

์„ค๋ฌธ์กฐ์‚ฌ ์˜ˆ์ œ - form์ด์šฉ, jsp  (0) 2021.02.24
html์˜ Action๊ณผ JSP๋ฅผ ํ™œ์šฉํ•ด ์ž…๋ ฅ๋ฐ›์€๊ฐ’ ๋„˜๊ฒจ์ฃผ๋Š”๋ฒ•  (0) 2021.02.24
iframe (web ์•ˆ์˜ web)  (0) 2021.02.24
List (๋ชฉ๋ก) - ul , ol ํ™œ์šฉ๋ฒ•  (0) 2021.02.24
๐Ÿš€ ํ…Œ์Šฌ๋ผ ํ™ˆํŽ˜์ด์ง€ ๋งŒ๋“ค๊ธฐ 1๏ธโƒฃ  (0) 2021.02.23

๊ด€๋ จ๊ธ€

๋Œ“๊ธ€

ํ‹ฐ์Šคํ† ๋ฆฌํˆด๋ฐ”