๐Ÿงฉ ๊ธฐ๋ก์ž ๊ผฌ๋น„์˜ ํ†ต์ œ ๋ฃจํ‹ด

IT/HTML&CSS

[HTML] ํ‘œ๋งŒ๋“ค๊ธฐ(Table)_์˜ˆ์ œ_๊ธฐ์ดˆ(2021-08-27)

๊ธฐ๋ก์ž ๊ผฌ๋น„ 2021. 11. 8. 
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>ํ‘œ ์˜ˆ์ œ</title>
  </head>
  <body>
    <table border="1" cellspacing="0">
      <caption>๊ณต์—ฐ์ •๋ณด</caption>
      <tr>
        <th>๊ตฌ๋ถ„</th>
        <th>๊ณจ๋“œ</th>
        <th>ํ”„๋ฆฌ๋ฏธ์—„</th>
        <th>VIP</th>
      </tr>
      <tr>
        <th>์ผ๋ฐ˜์š”๊ธˆ</th>
        <td>20,900์›</td>
        <td>31,100์›</td>
        <td>34,200์›</td>
      </tr>
      <tr>
        <th>์•„๋™์š”๊ธˆ</th>
        <td colspan="3">์ดˆ๋“ฑํ•™์ƒ๊นŒ์ง€ ์ผ๋ฐ˜ ์š”๊ธˆ์˜ 50%</td>
      </tr>
      <tr>
        <th>๊ณต์—ฐ์‹œ๊ฐ„</th>
        <td>4์‹œ๊ฐ„20๋ถ„</td>
        <th>๊ณต์—ฐ๊ฐ„๊ฒฉ</th>
        <td>20๋ถ„</td>
      </tr>
      <tr>
        <th>์ฒซ ๊ณต์—ฐ์‹œ๊ฐ„</th>
        <td>06์‹œ00๋ถ„</td>
        <th>๋งˆ์ง€๋ง‰๊ณต์—ฐ์‹œ๊ฐ„</th>
        <td>์ต์ผ02์‹œ</td>
      </tr>
    </table>
    <hr>
    <h3>์˜ˆ์ œ๋ฌธ์ œ1</h3>
    <table border="1" cellspacing="0">
      <caption>์ฝ”์Šค๋‹ฅ์„ ๋ฌผ ํˆฌ์ž์ž๋ณ„ ๋งค๋งค๋™ํ–ฅ</caption>
      <tr><!--F12๋ฅผ ๋ˆŒ๋Ÿฌ ๋น„ํœ˜๋ฐœ์„ฑ(์ƒˆ๋กœ๊ณ ์นจํ•˜๋ฉด ์ €์žฅ์•ˆ๋จ)์œผ๋กœ ์Šคํƒ€์ผ์„ ์ž…๋ ฅํ•œ ๋’ค์— ๋ณต์‚ฌ ํ•œ ๋‹ค์Œ ๋“ค์–ด๊ฐ„ ๊ณณ์— ์•„๋ž˜ ์ฒ˜๋Ÿผ ์ ์šฉ์„ ํ•ด์ค˜๋ฉด ํŽธ์ง‘๊ธฐ์—์„œ๋„ ์ž…๋ ฅ๋จ(์ €์žฅํ•˜๋ฉด ๋ฐ˜์˜๋จ)-->
        <th rowspan="2" style="background: #d24a2b;color: #fff;font-size: 15px;">๊ตฌ๋ถ„</th>
        <th colspan="3">๋งค๋งค์ˆ˜๋Ÿ‰</th>
        <th colspan="3">๋งค๋„์ˆ˜๋Ÿ‰</th>
        <th rowspan="2">ํ•ฉ๊ณ„</th>
        <th rowspan="2">์ˆœ๋งค์ˆ˜</th>
      </tr>
      <tr>
        <th>์‹ ๊ทœ</th>
        <th>ํ™˜๋งค</th>
        <th>์†Œ๊ณ„</th>
        <th>์‹ ๊ทœ</th>
        <th>ํ™˜๋งค</th>
        <th>์†Œ๊ณ„</th>
      </tr>
      <tr>
        <th>์„ ๋ฌผํšŒ์‚ฌ</th>
        <td>47</td>
        <td>6</td>
        <td>53</td>
        <td>6</td>
        <td>42</td>
        <td>48</td>
        <td>101</td>
        <td>5</td>
      </tr>
      <tr>
        <th>์ฆ๊ถŒํšŒ์‚ฌ</th>
        <td>0</td>
        <td>0</td>
        <td>0</td>
        <td>0</td>
        <td>0</td>
        <td>0</td>
        <td>0</td>
        <td>0</td>
      </tr>
      <tr>
        <th>์€ํ–‰</th>
        <td>0</td>
        <td>0</td>
        <td>0</td>
        <td>0</td>
        <td>0</td>
        <td>0</td>
        <td>0</td>
        <td>0</td>
      </tr>
      <tr>
        <th>ํˆฌ์ž์‹ ํƒ</th>
        <td>0</td>
        <td>84</td>
        <td>84</td>
        <td>0</td>
        <td>0</td>
        <td>0</td>
        <td>149</td>
        <td>19</td>
      </tr>
      <tr>
        <th>๋ณดํ—˜ํšŒ์‚ฌ</th>
        <td>0</td>
        <td>0</td>
        <td>0</td>
        <td>0</td>
        <td>0</td>
        <td>0</td>
        <td>0</td>
        <td>0</td>
      </tr>
      <tr>
        <th>ํ•ฉ๊ณ„</th>
        <td>47</td>
        <td>90</td>
        <td>137</td>
        <td>6</td>
        <td>42</td>
        <td>48</td>
        <td>250</td>
        <td>24</td>
      </tr>
    </table>
    <hr>
    <h3>์˜ˆ์ œ๋ฌธ์ œ2_08/31</h3>
    <figure>
      <figcaption>์ ๊ฒ€์žฅ๋น„ ๋ฐ ์‹œํ—˜</figcaption>
    </figure>
    <table border="1" cellspacing="0">
      <tr>
        <th colspan="2" style="background-color: skyblue">๊ตฌ  ๋ถ„</th>
        <th colspan="2" style="background-color: skyblue">์ ๊ฒ€์žฅ๋น„</th>
      </tr>
      <tr>
        <th colspan="2">ํœด๋Œ€์žฅ๋น„</th>
        <td colspan="2">๋ง์›๊ฒฝ, ํ™•๋Œ€๊ฒฝ, ์†์ „๋“ฑ, ์นด๋ฉ”๋ผ, ํ•„๊ธฐ๋„๊ตฌ(ํ‘ํŒ, ๋ถ„ํ•„, ๋งค์งํŽœ), ์ค„์ž, ๊ท ์—ด๊ฒฝ, ๊ตํ†ต๊ทœ์ œ ๊ธฐ๊ตฌ ๋“ฑ</td>
      </tr>
      <tr>
        <th colspan="2">์ ‘๊ทผ์žฅ๋น„</th>
        <td colspan="2">์‚ฌ๋‹ค๋ฆฌ, ์ ๊ฒ€์ฐจ(๊ตด์ ˆ์ฐจ), ์ ๊ฒ€๋ณดํŠธ, ์ˆ˜์ค‘์นด๋ฉ”๋ผ ๋“ฑ</td>
      </tr>
      <tr>
        <th rowspan="10">๋น„ํŒŒ๊ดด์žฅ๋น„</th>
        <th rowspan="4">์ฝ˜ํฌ๋ฆฌํŠธ์†์ƒ๊ฒ€์‚ฌ</th>
        <td>์ฝ˜ํฌ๋ฆฌํŠธ ๊ฐ•๋„ ์ธก์ •</td>
        <td>์Šˆ๋ฏธํŠธํ•ด๋จธ, ํ…Œ์ŠคํŠธ์—”๋นŒ, ์ดˆ์ŒํŒŒํƒ์‚ฌ๊ธฐ, ํƒ„์„ฑํŒŒํƒ์‚ฌ๊ธฐ</td>
      </tr>
      <tr>
        <td>์ฝ˜ํฌ๋ฆฌํŠธ ๊ท ์—ด ๋ฐ ๊ฒฐํ•จํƒ์‚ฌ</td>
        <td>์ดˆ์ŒํŒŒํƒ์‚ฌ๊ธฐ, ํƒ„์„ฑํŒŒํƒ์‚ฌ๊ธฐ, ์ŒํŒŒํƒ์‚ฌ๊ธฐ(AE๋ฒ•), ๋ ˆ์ด์ €ํƒ์‚ฌ๊ธฐ, ์ ์™ธ์„ ์นด๋ฉ”๋ผ, ์Šคํ‹ธ์นด๋ฉ”๋ผ, ๋ ˆ์ด๋‹คํƒ์‚ฌ๊ธฐ</td>
      </tr>
      <tr>
        <td>์ฒ ๊ทผํƒ์‚ฌ</td>
        <td>ํŽ˜์ฝ”๋ฏธํ„ฐ, ๋ฐฉ์‚ฌ์„ ํˆฌ๊ณผ๊ธฐ</td>
      </tr>
      <tr>
        <td>์ฝ˜ํฌ๋ฆฌํŠธ ์—ดํ™”๋„ํƒ์‚ฌ</td>
        <td>์žฌ๋ฃŒ์‹œํŽธ์— ๋Œ€ํ•œ ์—ผํ•ด์‹œํ—˜</td>
      </tr>
      <tr>
        <th rowspan="6">๊ฐ•์žฌ์†์ƒํƒ์‚ฌ</th>
        <td>ํ‘œ๋ฉด๊ท ์—ด ํƒ์ง€</td>
        <td>์ž๊ธฐ์ž…์žํƒ์‚ฌ๊ธฐ, ์ดˆ์ŒํŒŒํƒ์‚ฌ๊ธฐ, ์—ผ๋ฃŒ์นจํˆฌ๋ฒ•, ์™ธ๋™์ „๋ฅ˜๋ฒ•</td>
      </tr>
      <tr>
        <td>๋‚ด๋ถ€๊ฒฐํ•จ ํƒ์ง€</td>
        <td>์ดˆ์ŒํŒŒํƒ์‚ฌ๊ธฐ, AE์žฅ๋น„, ๋ฐฉ์‚ฌ์„ ํˆฌ๊ณผ๊ธฐ</td>
      </tr>
      <tr>
        <td>์šฉ์ ‘๋ถ€ ๊ฒฐํ•จ</td>
        <td>์ดˆ์ŒํŒŒํƒ์‚ฌ๊ธฐ, ๋ฐฉ์‚ฌ์„ ํˆฌ๊ณผ๊ธฐ</td>
      </tr>
      <tr>
        <td>ํ”ผ๋กœ๊ท ์—ดํƒ์‚ฌ</td>
        <td>์ž๊ธฐ์ž…์žํƒ์‚ฌ๊ธฐ, ์—ผ๋ฃŒ์นจํˆฌ๋ฒ•, ์ดˆ์ŒํŒŒํƒ์‚ฌ๊ธฐ</td>
      </tr>
      <tr>
        <td>์‘๋ ฅ๋ถ€์‹ํƒ์‚ฌ</td>
        <td>์ž๊ธฐ์ž…์žํƒ์‚ฌ๊ธฐ, ์—ผ๋ฃŒ์นจํˆฌ๋ฒ•</td>
      </tr>
      <tr>
        <td>๋‘๊ป˜๊ฒ€์‚ฌ</td>
        <td>์ดˆ์ŒํŒŒํƒ์‚ฌ๊ธฐ</td>
      </tr>
    </table>
  </body>
</html>
์ €์ž‘์žํ‘œ์‹œ ๋น„์˜๋ฆฌ (์ƒˆ์ฐฝ์—ด๋ฆผ)

'IT > HTML&CSS' ์นดํ…Œ๊ณ ๋ฆฌ์˜ ๋‹ค๋ฅธ ๊ธ€

[HTML] ๋‚ด๋ถ€์Šคํƒ€์ผ์‹œํŠธ๋ฐฉ์‹_๊ธฐ์ดˆ(2021-08-31)  (1) 2021.11.08
[HTML] ์ธ๋ผ์ธ์Šคํƒ€์ผ_๊ธฐ์ดˆ(2021-08-31)  (0) 2021.11.08
[HTML] ํ‘œ๋งŒ๋“ค๊ธฐ(Table)_๊ธฐ์ดˆ(2021-08-27)  (0) 2021.11.08
[HTML] ํƒญ์ œ๋ชฉ_๊ธฐ์ดˆ(2021-08-17)  (0) 2021.11.07
[HTML] ๊ธฐ๋ณธํ”„๋ ˆ์ž„ ๋งŒ๋“ค๊ธฐ(2021-08-17)  (0) 2021.11.07

๋Œ“๊ธ€

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