2์ผ์ฐจ table ํƒœ๊ทธ

2020. 10. 24. 16:22ใ†HTML & CSS ๐Ÿ’™/HTML ์—ฐ์Šต

 

 

 

 

 

 

 

 

ํ‘œ ํ˜•์‹์˜ ๋ ˆ์ด์•„์›ƒ์„ ๋งŒ๋“œ๋Š” ํƒœ๊ทธ

<table> </table> ์‚ฌ์ด์— <tr> <td>ํƒœ๊ทธ๋ฅผ ๋„ฃ๋Š”๋‹ค.

 

  • <table> : ํ‘œ๋ฅผ ๋‚˜ํƒ€๋‚ด๋Š” ํƒœ๊ทธ
  • <tr> : ํ–‰์„ ๋‚˜ํƒ€๋‚ด๋Š” ํƒœ๊ทธ (table row)
  • <th> : ์ œ๋ชฉ ์…€์„ ๋‚˜ํƒ€๋‚ด๋Š” ํƒœ๊ทธ (table header)
  • <td> : ์…€์„ ๋‚˜ํƒ€๋‚ด๋Š” ํƒœ๊ทธ (table data)
  • <caption>: ํ‘œ์˜ ์ œ๋ชฉ์„ ๋‚˜ํƒ€๋‚ด๋Š” ํƒœ๊ทธ
  • <thead>: ์ œ๋ชฉ ํ–‰์„ ๊ทธ๋ฃนํ™”ํ•˜๋Š” ํƒœ๊ทธ
  • <tfoot>: ๋ฐ”๋‹ฅ ํ–‰์„ ๊ทธ๋ฃนํ™”ํ•˜๋Š” ํƒœ๊ทธ
  • <tbody>: ๋ณธ๋ฌธ ํ–‰์„ ๊ทธ๋ฃนํ™”ํ•˜๋Š” ํƒœ๊ทธ

 

 

<tr>

      <td>Korean</td>

      <td>Math</td>

      <td>Science</td>

</tr>

 

<tr> ํƒœ๊ทธ ์•ˆ์— <td>๊ฐ€ ๋Š˜์–ด๋‚  ์ˆ˜๋ก ๊ฐ€๋กœ ์…€์ด ์—ฌ๋Ÿฌ๊ฐœ๊ฐ€ ์ƒ๊ธด๋‹ค.

์„ธ๋กœ๋กœ ํ–‰์„ ๋Š˜๋ฆฌ๊ณ  ์‹ถ์œผ๋ฉด <tr>ํƒœ๊ทธ๋ฅผ ๋Š˜๋ ค์ฃผ๋ฉด ๋œ๋‹ค. 

 

 

Border: ํ…Œ์ด๋ธ”์˜ ๋‘๊ป˜ ์„ค์ •

ํฐ ๋”ฐ์˜ดํ‘œ ์•ˆ์— ์ˆซ์ž๋ฅผ ๋„ฃ์–ด ๋‘๊ป˜ ๊ฐ’์„ ๋„ฃ์–ด์ค€๋‹ค. 

<table border="2"> border - ํ…Œ์ด๋ธ”์˜ ํ…Œ๋‘๋ฆฌ ๋‘๊ป˜

 

 

Colspan : ์—ด ํ•ฉ์น˜๊ธฐ (๊ฐ€๋กœ๋กœ)

๋”ฐ์˜ดํ‘œ ์•ˆ์— ์ˆซ์ž๋ฅผ ๋„ฃ์–ด ๋ช‡ ๊ฐœ์˜ ์—ด์„ ํ•ฉํ•  ๊ฒƒ์ธ์ง€ ๊ฐ’์„ ๋„ฃ์–ด์ค€๋‹ค.

<td colspan="2">

 

Rowspan: ํ–‰ ํ•ฉ์น˜๊ธฐ (์„ธ๋กœ๋กœ)

colspan๊ณผ ๋งˆ์ฐฌ๊ฐ€์ง€๋กœ ๋ช‡ ๊ฐœ๋ฅผ ํ•ฉํ•  ๊ฒƒ์ธ์ง€ ๊ฐ’์„ ๋„ฃ์–ด์ค€๋‹ค. 

<td rowspan="4">

 

<html>

<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width">
	<title>repl.it</title>
	<link href="style.css" rel="stylesheet" type="text/css" />
</head>

<body>
	<table border="3">
		<tr>
			<td rowspan="4"> Mid-term test scores </td>
		</tr>

		<tr>
			<td>Korean</td>
			<td>Math</td>
			<td>Science</td>
		</tr>
		<tr>
			<td>100</td>
			<td>95</td>
			<td>98</td>
		</tr>
		<tr>
			<td colspan="2"> Average </td>
			<td>90</td>
		</tr>
	</table>

<table>
  <table border="1">
    <tr>
      <td>1ํ–‰ 1์—ด</td>
      <td>1ํ–‰ 2์—ด</td>
      <td>1ํ–‰ 3์—ด</td>
      <td>1ํ–‰ 4์—ด</td>
    </tr>

    <tr>
      <td>2ํ–‰ 1์—ด</td>
      <td>2ํ–‰ 2์—ด</td>
      <td>2ํ–‰ 3์—ด</td>
      <td>2ํ–‰ 4์—ด</td>
    </tr>

     <tr>
      <td colspan="2">3ํ–‰ 1์—ด</td>
      <td>3ํ–‰ 3์—ด</td>
      <td>3ํ–‰ 4์—ด</td>
    </tr>
  </table>
  
</body>

</html>

 

 

๊ฒฐ๊ณผ๋ฌผ

 

 

์ €์ž‘์žํ‘œ์‹œ ๋น„์˜๋ฆฌ ๋ณ€๊ฒฝ๊ธˆ์ง€

'HTML & CSS ๐Ÿ’™ > HTML ์—ฐ์Šต' ์นดํ…Œ๊ณ ๋ฆฌ์˜ ๋‹ค๋ฅธ ๊ธ€

3์ผ์ฐจ ๋ ˆ์ด์•„์›ƒ ๊ตฌ์„ฑ ํƒœ๊ทธ div / span , div๋ฅผ ์ด์šฉํ•œ ๋ ˆ์ด์•„์›ƒ ๊ตฌ์„ฑ  (0) 2020.10.26
3์ผ์ฐจ Form ํƒœ๊ทธ  (0) 2020.10.26
3์ผ์ฐจ ๊ฐœ์ธ์—ฐ์Šต Video ํƒœ๊ทธ ๋ฐ html ์ฝ˜ํ…์ธ  ๋ชจ๋ธ  (0) 2020.10.26
2์ผ์ฐจ img ์ด๋ฏธ์ง€ ํƒœ๊ทธ / audio ์†Œ๋ฆฌ ํƒœ๊ทธ  (0) 2020.10.24
2์ผ์ฐจ ๋ฆฌ์ŠคํŠธ ํƒœ๊ทธ <li>, <ol>, <ul>,<dl>,<dd>,<dt>,<a href=" >  (0) 2020.10.24
1์ผ์ฐจ Paragraph, ๊ธ€์”จํฌ๊ธฐ ํƒœ๊ทธ  (0) 2020.10.24

๊ด€๋ จ๊ธ€

๋Œ“๊ธ€ 0

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