first-coding/table-lecture.html at main · DoHoon2/first-coding · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>중첩되는 태그</title>

  <!-- 표의 시각화를 위한 CSS 코드 -->
  <style>
    table { border-collapse: collapse; }
    th, td { border: 1px solid black; padding: 8px; }
  </style>

</head>
<body>

    <table>
        <caption>오늘자 식단표</caption>
        <tr>
            <td></td>
            <th scope="col">아침</th>
            <th scope="col">점심</th>
            <th scope="col">저녁</th>
          </tr>
          <tr>
            <th scope="row">밥</th>
            <td>현미밥</td>
            <td rowspan="2">호박죽</td>
            <td>흰쌀밥</td>
          </tr>
          <tr>
            <th scope="row">국</th>
            <td>콩나물국</td>
            <td>갈비탕</td>
          </tr>
          <tr>
            <th scope="row">반찬</th>
            <td colspan="3">배추김치</td>
          </tr>
        </table>
</body>
</html>

<!--
  <table>
    <tr>
      <td></td>
      <td>아침</td>
      <td>점심</td>
      <td>저녁</td>
    </tr>
    <tr>
      <td>밥</td>
      <td>현미밥</td>
      <td>호박죽</td>
      <td>흰쌀밥</td>
    </tr>
    <tr>
      <td>국</td>
      <td>콩나물국</td>
      <td></td>
      <td>갈비탕</td>
    </tr>
    <tr>
      <td>반찬</td>
      <td>배추김치</td>
      <td></td>
      <td></td>
    </tr>
  </table>
 -->