html 표 작성 다양한 스타일

html 표 작성 다양한 스타일

1.  기본표

<table>
  <tr>
    <th>Header 1</th>
    <th>Header 2</th>
  </tr>
  <tr>
    <td>Data 1</td>
    <td>Data 2</td>
  </tr>
  <tr>
    <td>Data 3</td>
    <td>Data 4</td>
  </tr>
</table>

적용결과

Header 1	Header 2
Data 1	Data 2
Data 3	Data 4

 

---

2. 표에 테두리 가 있는 표

<table style="border-collapse: collapse; width: 100%;">
  <tr>
    <th style="border: 1px solid black;">Header 1</th>
    <th style="border: 1px solid black;">Header 2</th>
  </tr>
  <tr>
    <td style="border: 1px solid black;">Data 1</td>
    <td style="border: 1px solid black;">Data 2</td>
  </tr>
  <tr>
    <td style="border: 1px solid black;">Data 3</td>
    <td style="border: 1px solid black;">Data 4</td>
  </tr>
</table>

 

적용결과

Header 1	Header 2
Data 1	Data 2
Data 3	Data 4

 

---

3. 표에 줄 간격 및 배경색 있는 표

<table style="border-collapse: collapse; width: 100%;">
  <tr style="background-color: #f2f2f2;">
    <th style="border: 1px solid black; padding: 8px;">Header 1</th>
    <th style="border: 1px solid black; padding: 8px;">Header 2</th>
  </tr>
  <tr>
    <td style="border: 1px solid black; padding: 8px;">Data 1</td>
    <td style="border: 1px solid black; padding: 8px;">Data 2</td>
  </tr>
  <tr style="background-color: #f2f2f2;">
    <td style="border: 1px solid black; padding: 8px;">Data 3</td>
    <td style="border: 1px solid black; padding: 8px;">Data 4</td>
  </tr>
</table>

적용결과

Header 1	Header 2
Data 1	Data 2
Data 3	Data 4

 

---

4. 표에 가운데 정렬 및 헤더 스타일을 반영한 표

<table style="border-collapse: collapse; width: 50%; margin: auto;">
  <tr style="background-color: #f2f2f2;">
    <th style="border: 1px solid black; padding: 8px; text-align: center; font-weight: bold;">Header 1</th>
    <th style="border: 1px solid black; padding: 8px; text-align: center; font-weight: bold;">Header 2</th>
  </tr>
  <tr>
    <td style="border: 1px solid black; padding: 8px; text-align: center;">Data 1</td>
    <td style="border: 1px solid black; padding: 8px; text-align: center;">Data 2</td>
  </tr>
  <tr style="background-color: #f2f2f2;">
    <td style="border: 1px solid black; padding: 8px; text-align: center;">Data 3</td>
    <td style="border: 1px solid black; padding: 8px; text-align: center;">Data 4</td>
  </tr>
</table>

적용결과

Header 1	Header 2
Data 1	Data 2
Data 3	Data 4

 

---

5. 라운드된 테두리와 여백이 있는 표

<table style="border-collapse: separate; border-spacing: 10px; width: 100%; border-radius: 10px; overflow: hidden;">
  <tr style="background-color: #f2f2f2;">
    <th style="padding: 8px; font-weight: bold;">Header 1</th>
    <th style="padding: 8px; font-weight: bold;">Header 2</th>
  </tr>
  <tr>
    <td style="padding: 8px;">Data 1</td>
    <td style="padding: 8px;">Data 2</td>
  </tr>
  <tr style="background-color: #f2f2f2;">
    <td style="padding: 8px;">Data 3</td>
    <td style="padding: 8px;">Data 4</td>
  </tr>
</table>

적용결과

Header 1	Header 2
Data 1	Data 2
Data 3	Data 4

---

6. 그림자가 있는 표

<table style="border-collapse: separate; width: 100%; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);">
  <tr style="background-color: #f2f2f2;">
    <th style="padding: 8px; font-weight: bold;">Header 1</th>
    <th style="padding: 8px; font-weight: bold;">Header 2</th>
  </tr>
  <tr>
    <td style="padding: 8px;">Data 1</td>
    <td style="padding: 8px;">Data 2</td>
  </tr>
  <tr style="background-color: #f2f2f2;">
    <td style="padding: 8px;">Data 3</td>
    <td style="padding: 8px;">Data 4</td>
  </tr>
</table>

적용결과

Header 1	Header 2
Data 1	Data 2
Data 3	Data 4