ํ, table
๐ปํ ์์ฑ ์์ ์ดํดํ๊ธฐ๐ป
[2ํ 2์ด ์์ ๋ง๋๋ ์์]
1. ํฐ ํ ํ๋๋ฅผ ๋ง๋ ๋ค.
2. ๊ฐ๋ก ๊ธธ์ด๊ฐ ์ ์ฒด ๊ธธ์ด์ ๊ฐ๊ณ ์ธ๋ก๊ธธ์ด๋ ์ ์ฒด ๊ธธ์ด์ 1/2์ธ ํ 2๊ฐ๋ฅผ ๋ง๋ ๋ค.
3. 2์์ ๋ง๋ ํ์ ๊ฐ๋ก๊ธธ์ด 1/2, ์ธ๋ก๊ธธ์ด๋ ์ ์ฒด ๊ธธ์ด์ 1/2์ธ ํ 4๊ฐ๋ฅผ ๋ง๋ ๋ค.
๐ป๊ตฌ์ฑ์์๐ป
1. <table>
- ์ ์ฒด ์ปจํ ์ด๋
2. <tr>
- table row์ ์ฝ์
- ํ ์ญํ
3. <td>
- table data์ ์ฝ์
- ์ ์ญํ
4. <th>
- table header์ ์ฝ์
- ํ์ ๋ชฉ์ ์ถ๋ ฅํ๋ ์ ์ฉ ์
๐ปํ ์ด๋ธ ์์ฑ๐ป
<body>
<h1>2ํ2์ด ํ
์ด๋ธ</h1>
<table>
<tr>
<td>1</td>
<td>2</td>
</tr>
<tr>
<td>3</td>
<td>4</td>
</tr>
</table>
</body>
๐ปํ ์ด๋ธ์ ํฌ๊ธฐ ์กฐ์ ๐ป
- width, height ์์ฑ์ผ๋ก ์กฐ์ ํ๋ค.
<body>
<h1>2ํ2์ด ํ
์ด๋ธ</h1>
<!-- ํฐ์์ ์ฌ์ด์ฆ ์กฐ์ ์ ํ๋ฉด ์์ ์์๋ค๋ ์กฐ์ ์ด ๋๋ค. -->
<table border="1" width="200" height="200">
<tr>
<td>1</td>
<td>2</td>
</tr>
<tr>
<td>3</td>
<td>4</td>
</tr>
</table>
</body>
Q. ์ ์ฒด ๋๋น๊ฐ 200์ผ ๋, ํ ์ ์ ๋๋น๋ฅผ 100์ผ๋ก ์ค์ ํ๋ค๋ฉด ์ฌ์ด์ฆ๊ฐ ๋ฐ๋ฐ์ผ๋ก ๋๋ ์ง๊น?
A. ๊ทธ๋ ์ง์๋ค.
์ ์ ๋ด๋ถ ๋๋น๋ฅผ 100๋งํผ ์ค์ ํ์ผ๋ฏ๋ก ํ ๋๋ฆฌ ๊ธธ์ด๋งํผ ‘2’์ ๋๋น๊ฐ ์ค์ด๋ค์๋ค.
์น์ ํน์ง์ ๋ฐ๋ผ ํ ์ ์ฒด ๋๋น๋ ์ฆ๊ฐํ์ง์์ง๋ง, ์ ์ฒด ๋์ด๋ ์ฆ๊ฐํ๋ค.
(์น์ ํน์ง : ๋๋น๋ ๊ณ ์ , ๊ธธ์ด๋ ์ ๋์ )
๋ชจ๋ ์ ์ ๋๋น์ ํฉ์ ํ ์ด๋ธ์ ๋๋น๊ฐ ๋์ด์ผ ํ๋ค.
๋ชจ๋ ์ ์ ๋์ด์ ํฉ์ ํ ์ด๋ธ์ ๋์ด๊ฐ ๋์ด์ผ ํ๋ค.
๐ปํ ์ด๋ธ ๋ฐ์ดํฐ ์ ๋ ฌํ๊ธฐ๐ป
- align(๊ฐ๋ก ์ ๋ ฌ), valign(์ธ๋ก ์ ๋ ฌ) ์์ฑ์ผ๋ก ํ ์คํธ๋ฅผ ์ ๋ ฌํ๋ค.
- ์ค์ ์ ํด์ฃผ์ง์์ ๋์ ๊ธฐ๋ณธ๊ฐ์ align="left", valign="center"์ด๋ค.
<body>
<h1>2ํ2์ด ํ
์ด๋ธ</h1>
<table border="1" width="200" height="200">
<tr>
<td align="center">1</td>
<td align="right">2</td>
</tr>
<tr>
<td valign="top">3</td>
<td valign="bottom">4</td>
</tr>
</table>
</body>
๐ปํ ์ด๋ธ ์ ์ง์ ํ๊ธฐ๐ป
- ์์๋ง๋ค ์ง์ ๊ฐ๋ฅํ๋ค.
- table ์์ tr, tr์์ td๊ฐ ์๋ค.
- bgcolor ์์ฑ์ผ๋ก ์ง์ ์ ํ๋ค.
<body>
<h1>2ํ2์ด ํ
์ด๋ธ</h1>
<table border="1" width="200" height="200" bgcolor="yellow">
<tr bgcolor="skyblue">
<td bgcolor="red">1</td>
<td>2</td>
</tr>
<tr>
<td>3</td>
<td>4</td>
</tr>
</table>
</body>
๐ป์ ๋ณํฉ๐ป
1. ๊ฐ๋ก ์ ๋ณํฉ
- ์ผ์ชฝ ์ ๊ธฐ์ค์ผ๋ก ๋ณํฉํ๋ค.
- colspan="์๋ฆฟ์" (๊ธฐ๋ณธ์ผ๋ก 1์ด ํ ๋น๋์ด์๋ค.)
<body>
<h1>๊ฐ๋ก ์
๋ณํฉ ํ
์ด๋ธ</h1>
<table border width="200" height="200">
<tr>
<!-- colspan="1" ๊ธฐ๋ณธ๊ฐ -->
<td colspan="2">1</td>
<!-- <td>2</td> colspan ์ค์ ํ ์ง์ฐ๊ธฐ -->
</tr>
<tr>
<td>3</td>
<td>4</td>
</tr>
</table>
</body>๋ณํฉ์ ๊ฐ๋ ๋ณด๋ค๋ ‘1’์ด 2๊ฐ์ ์๋ฆฟ์๋ฅผ ์ฐจ์งํ์ฌ ‘2’๊ฐ ๋ฐ๋ ค๋๋ค.
๊ทธ๋ฌ๋ฏ๋ก ๋ณํฉํ ์์น์์ ์๋ฆฟ์๋ฅผ ๋๋ ค์ค๋งํผ ๊ทธ ์์น์ <td>๋ ์ญ์ ํด์ค์ผํ๋ค.
2. ์ธ๋ก ์ ๋ณํฉ
- ์์ชฝ ์ ๊ธฐ์ค์ผ๋ก ๋ณํฉํ๋ค.
- rowspan="์๋ฆฟ์" (๊ธฐ๋ณธ์ผ๋ก 1์ด ํ ๋น๋์ด์๋ค.)
<body>
<h1>์ธ๋ก ์
๋ณํฉ ํ
์ด๋ธ</h1>
<table border width="200" height="200">
<tr>
<td rowspan="2">1</td>
<!-- <td>2</td> rowspan ์ค์ ํ ์ง์ฐ๊ธฐ -->
</tr>
<tr>
<td>3</td>
<td>4</td>
</tr>
</table>
</body>
๐ปํ ์ด๋ธ ์์ ์์(๊ถ์ฅ)๐ป
1. ๊ธฐ๋ณธ ์์
(table, tr, td)
2. ๋ฐ์ดํฐ ์์ฑ
3. ํ
์ด๋ธ ํฌ๊ธฐ ์กฐ์ (์ ์ฒด ๋๋น ์กฐ์ ํ ์ด ๋๋น ์กฐ์ )
- ๋์ด๋ ๋ฐ์ดํฐ๊ฐ ์ถ๊ฐ, ์ญ์ ๋ ๋๋ง๋ค ๋ณ๊ฒฝํด์ผํ๊ธฐ ๋๋ฌธ์ ๋๋ถ๋ถ ํ์ ๋์ด๋ ์กฐ์ ํ์ง ์๋๋ค.
'WEB > HTML' ์นดํ ๊ณ ๋ฆฌ์ ๋ค๋ฅธ ๊ธ
| [HTML] HTML5์ ์๋ก์ด ๊ธฐ๋ฅโ (placeholder, required, email, url, number, range, color, date) (0) | 2023.09.24 |
|---|---|
| [HTML] ํผ <form>, <input>, <select>, <textarea> ํ๊ทธ (0) | 2023.09.21 |
| [HTML] ์ธ๋ผ์ธ ํ๊ทธ์ ๋ธ๋ญ ํ๊ทธ (0) | 2023.09.20 |
| [HTML] img ํ๊ทธ (src, alt, width, height, border) (0) | 2023.09.20 |
| [HTML] ๋งํฌ(a ํ๊ทธ) (0) | 2023.09.20 |
