๋ชฉ์ฐจ
[๐ฑ๋ชฉ์ฐจ๐ฑ]
- <table> ํ๊ทธ
- <table> ์์ฑ
- <td> ์์ฑ
- +์ค์ต : Table ๋ฌ๋ ฅ์ค์ต
- +์ค์ต : Table ์๊ฐํ์ค์ต
- +์ค์ต : ์นดํ์๋ฃ ์ฃผ๋ฌธ ํ ์ด๋ธ ์์ฑ
01. <table>ํ๊ทธ
ํ๋ฅผ ๋ง๋ค ๋ ์ฌ์ฉํ๋ ํ๊ทธ์ ๋๋ค. ๋จผ์ ํ์ ์ฐ๊ณ ํ์ ์์ ์์๋ก ์นธ์ ๋ฃ์ด์ฃผ๋ ๊ฒ์ด ๊ธฐ๋ณธ์ ๋๋ค.
- <table> -> ํ๋ฅผ ๊ฐ์ธ๋ ํ๊ทธ์ ๋๋ค.
- <tr> -> ํ์ ๋ด๋ถ์ ํ (๊ฐ๋ก)
- <th> ->ํ ๋ด๋ถ์ ์ ๋ชฉ ์นธ
- <td> -> ํ ๋ด๋ถ์ ์ผ๋ฐ ์นธ
<table>
<tr> <!-- ํ
์ด๋ธ ๋ด๋ถ์ ํ -->
<td></td> <!--> ๊ฐ๋ก ๋ด๋ถ์ ์ผ๋ฐ์นธ-->
<td></td>
</tr>
</table>
02. <table> ์์ฑ
- border : ํ ๋๋ฆฌ ๋๊ป
- cellspacing : ํ ๋๋ฆฌ ๊ฐ๊ฒฉ ์ฌ์ด์ ๋๋น
- cellpadding : ์ ๋ด๋ถ์ ๊ฐ๊ฒฉ
- align : ํ ์ด๋ธ ์ ๋ ฌ ์์ฑ
- width ์ height : ํ ์ด๋ธ์ ๋๋น์ ๋์ด
- bgcolor ์ bordercolor : ํ ์ด๋ธ ๋ฐฐ๊ฒฝ์๊ณผ, ํ ๋๋ฆฌ ์
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Table</title>
</head>
<body>
<!-- border, align, bgcolor ๋นจ๊ฐ์ ๊ธ์จ์ธ ์ด์ ?
์ ์ ๊ทธ๋ฆฐ๋ค? = ๊พธ๋ฏผ๋ค -> CSS๊ฐ ํ๋ ๊ฒ์ด ๋ฐ๋์ง
-->
<table border="1" width="150" height="150" align="center" bgcolor="skyblue" bordercolor="red">
<caption>
<h3>My Table</h3>
</caption>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
<tr>
<td>7</td>
<td>8</td>
<td>9</td>
</tr>
</table>
</body>
</html>
==========================================๊ฒฐ๊ณผ ํ์ด=======================================
| 1 | 2 | 3 |
| 4 | 5 | 6 |
| 7 | 8 | 9 |
03. <td>์์ฑ
- colspan : ํด๋น ์นธ์ด ์ ์ ํ๋ ์ธ๋ก(์ด) ์ ์ง์ -> ์ฆ, ๊ฐ๋กํฉ์น๊ธฐ //์๋ฅผ ๋ค๋ฉด colspan=2 ๋ผ๋ฉด 2๊ฐ์ col์ ๋ณํฉ์ํค๊ฒ ๋ค๋ ๋ป
- rowspan : ํด๋น ์นธ์ด ์ ์ ํ๋ ๊ฐ๋ก ์(ํ) ์ง์ -> ์ฆ, ์ธ๋กํฉ์น๊ธฐ
์ค์ ์ฌ์ฉ ์ฝ๋
<h1>๊ฐ๊ฒฉํ NEW</h1>
<table border="1" cellspacing="0" cellpadding="10">
<tr>
<!-- th: ํ
์ด๋ธ์ ์ ๋ชฉ ์นธ์ ์๋ฏธ (bold์ฒด) -->
<th>๋ฉ๋ด</th>
<th>๊ฐ๊ฒฉ</th>
<th>๋น๊ณ </th>
</tr>
<tr>
<td>๊ตญ๋ฌผ๋ก๋ณถ์ด</td>
<td>5000</td>
<td>2์ธ ์ด์ ์ฃผ๋ฌธ ๊ฐ๋ฅ</td>
</tr>
<!--
colsapn: ๊ฐ๋กํฉ์น๊ธฐ
rowspan: ์ธ๋กํฉ์น๊ธฐ
-->
<tr>
<td>์ฐธ์น๊น๋ฐฅ</td>
<!-- rowspan="2" 2๊ฐ์ row๋ฅผ ํฉ์น๊ฒ ์ต๋๋ค -->
<td rowspan="2">4000</td>
<td>x</td>
</tr>
<tr>
<td>์น์ฆ๊น๋ฐฅ</td>
<td>์ ๋ฉ๋ด</td>
</tr>
<tr>
<!-- colspan="3" 3๊ฐ์ col๋ฅผ ํฉ์น๊ฒ ์ต๋๋ค -->
<td colspan="3">์๋ (ํ์ )</td>
</tr>
</table>๊ฐ๊ฒฉํ NEW
| ๋ฉ๋ด | ๊ฐ๊ฒฉ | ๋น๊ณ |
|---|---|---|
| ๊ตญ๋ฌผ๋ก๋ณถ์ด | 5000 | 2์ธ ์ด์ ์ฃผ๋ฌธ ๊ฐ๋ฅ |
| ์ฐธ์น๊น๋ฐฅ | 4000 | x |
| ์น์ฆ๊น๋ฐฅ | ์ ๋ฉ๋ด | |
| ์๋ (ํ์ ) | ||
+์ค์ต Table ๋ฌ๋ ฅ์ค์ต
style=“color: ์ปฌ๋ฌ์ด๋ฆ;” ์์ฑ ์ ์ฉ
+์ค์ต Table ์๊ฐํ์ค์ต
MARVEL ๋ก๊ณ ๋ฅผ ๋๋ ์ ๋ ์ ํ๋ธ ๋ง๋ธ ์์ ๋งํฌ๋ก ์ด๋ (์ด๋์ผ ์ฌ์ง์ผ๋ก ๋์ฒด)
+์ค์ต ์นดํ ์๋ฃ ์ฃผ๋ฌธ ํ ์ด๋ธ์์ฑ
- ์ค์ต 1์์ ์์ฑํ ์นดํ ๋ฉ๋ด ๋ฆฌ์คํธ๋ฅผ Table
- ๋ก ๋ง๋ค๊ธฐ(or ์ผ์ชฝ ์ฌ์ง๊ณผ ๊ฐ๊ฒ ๋ง๋ค๊ธฐ)
- ์๋ฃ์ด๋ฆ์๋๋ฅด๋ฉดํด๋น์๋ฃ์ ๋ณด๊ฐ์๋ํ์ด ์ง๋ก ์ด๋!
- ๊ฐ์ ๊ฐ๊ฒฉ์ ์๋ฃ ๋ง๋ค์ด์ ํฉ์น๊ธฐ
