CodeAcademy - HTML Table

 

Table

(1) Rows

<table>을 사용하는 많은 프로그램에서는 <table>에 대한 정의가 이미 되어 있으므로,

그 뜻은 데이터가 있는 행(row)과 열(column) 그리고 셀(cell)을 가지고 있어야 한다는 말입니다.

<table>에 데이터를 넣기 위한 첫번째 단계는 행 요소인 <tr>을 이용해 행을 입력하는 것입니다.

<table>
  <tr>
  </tr>
  <tr>
  </tr>
</table>

 

(2) Data

행만으로는 충분한 데이터를 <table>에 넣지 못합니다.

각 셀의 요소도 정의해줘야 합니다. 이는 <td>를 이용해 추가할 수 있습니다.

<table>
  <tr>
    <td>73</td>
    <td>81</td>
  </tr>
</table>

위 예제에는 73과 81이 한 행 안에 입력되었습니다.

두 데이터를 추가함으로써 우리는 두 cell 값을 입력하게 된 것입니다.

브라우저의 표에는 행이 하나고 열이 둘인 표가 됩니다.

 

(3)Headings

<table>은 데이터가 뭘 나타내고 있는지에 대한 제목이 없으면 의미가 없습니다.

행과 열에 제목을 입력하고 싶다면 <table>의 머리글 요소인 <th>를 쓸 수 있습니다.

머리글 요소는 관련 제목을 제외하곤 일반적인 데이터 요소와 동일하게 사용됩니다.

데이터와 마찬가지로 머리글 요소는 <table>의 행 안에 배치해야 합니다.

<table>
  <tr>
    <th></th>
    <th scope="col">Saturday</th>
    <th scope="col">Sunday</th>
  </tr>
  <tr>
    <th scope="row">Temperature</th>
    <td>73</td>
    <td>81</td>
  </tr>
</table>

scope 속성은 row와 col에 대해 둘 중 하나를 쓸 수 있습니다.

row 값을 사용할 경우 행에 대한 제목인 것을 알 수 있습니다.

col 값을 사용할 경우 열에 대한 제목인 것을 알 수 있습니다.

 

(4)Boarders

예전 HTML에서는 <border>속성을 이용하여 테두리를 추가하고

정수를 이용하여 테두리의 두께를 설정할 수 있었습니다.

<table border="1">
  <tr>
    <td>73</td>
    <td>81</td>
  </tr>
</table>

하지만 이런 방식은 이제 사용하지 않습니다.

페이지 구조와 모양을 구분하는데 더 용이한 CSS를 이용하여 동일한 효과를 얻을 수 있습니다.

table, td {
  border: 1px solid black;
}

 

(5)Spanning Columns

만약, 여러 열에 걸쳐 있는 데이터가 있다면 어떻게 해야 될까요?

<colspan> 속성을 이용하여 여러 열을 포함할 수 있습니다.

속성은 1보다 크거나 같은 정수를 사용하여 해당 열에 걸쳐 있는 열의 수를 나타냅니다.

<table>
  <tr>
    <th>Monday</th>
    <th>Tuesday</th>
    <th>Wednesday</th>
  </tr>
  <tr>
    <td colspan="2">Out of Town</td>
    <td>Back in Town</td>
  </tr>
</table>

 

(6)Spanning Rows

여러 행에 걸쳐 있는 데이터는 <rowspan> 속성으로 나타낼 수 있습니다.

1보다 크거나 같은 정수를 사용하여 세로줄의 수를 나타냅니다.

<table>
  <tr> <!-- Row 1 -->
    <th></th>
    <th>Saturday</th>
    <th>Sunday</th>
  </tr>
  <tr> <!-- Row 2 -->
    <th>Morning</th>
    <td rowspan="2">Work</td>
    <td rowspan="3">Relax</td>
  </tr>
  <tr> <!-- Row 3 -->
    <th>Afternoon</th>
  </tr>
  <tr> <!-- Row 4 -->
    <th>Evening</th>
    <td>Dinner</td>
  </tr>
</table>

 

(7)Table Body

시간이 지남에 따라 표는 많은 데이터를 포함하고 매우 커지거나 길어질 수 있습니다.

이럴 경우 관리를 위해 <tbody>를 사용하여 표를 분할할 수 있습니다.

<tbody>는 머리글을 제외한 표의 모든 데이터를 포함하여야 합니다.

<table>
  <tbody>
    <tr>
      <th></th>
      <th>Saturday</th>
      <th>Sunday</th>
    </tr>
    <tr>
      <th>Morning</th>
      <td rowspan="2">Work</td>
      <td rowspan="3">Relax</td>
    </tr>
    <tr>
     <th>Afternoon</th>
    </tr>
    <tr>
      <th>Evening</th>
      <td>Dinner</td>
    </tr>
  </tbody>
</table>

 

(8)Table Head

표의 본문이 분할될 때는 <thead> 요소를 사용하여 표의 머리글도 분할할 수 있습니다.

<table>
  <thead>
    <tr>
      <th></th>
      <th scope="col">Saturday</th>
      <th scope="col">Sunday</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">Morning</th>
      <td rowspan="2">Work</td>
      <td rowspan="3">Relax</td>
    </tr>
    <tr>
     <th scope="row">Afternoon</th>
    </tr>
    <tr>
      <th scope="row">Evening</th>
      <td>Dinner</td>
    </tr>
  </tbody>
</table>

또한, 열col 제목에만 <thead> 요소가 아래에 들어가게 됩니다.

<th>에 속하는 <scope> 속성을  통해 이것이 행row인지 열col인지 구분할 수 있습니다.

 

 

(9)Table Footer

긴 표의 하단에는 <tfoot>요소를 사용하여 분할할 수도 있습니다.

<table>
  <thead>
    <tr>
      <th>Quarter</th>
      <th>Revenue</th>
      <th>Costs</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th>Q1</th>
      <td>$10M</td>
      <td>$7.5M</td>
    </tr>
    <tr>
      <th>Q2</th>
      <td>$12M</td>
      <td>$5M</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <th>Total</th>
      <td>$22M</td>
      <td>$12.5M</td>
    </tr>
  </tfoot>
</table>

위 예시에 <tfoot>는 표에 있는 총합에 대한 데이터를 포함하고 있습니다.

바닥글은 종종 합계, 차이 혹은 기타 데이터 결과를 포함하는데 사용됩니다.

 

 

(10)Styling with CSS

CSS를 이용하여 표의 스타일을 지정할 수 있습니다.

table, th, td {
  border: 1px solid black;
  font-family: Arial, sans-serif;
  text-align: center;
}

예시는 지정할 수 있는 스타일의 극히 일부입니다.

 

 

정리

• <table> 요소는 표를 생성합니다.
• <tr> 요소는 표의 행을 생성합니다.
• 행에 데이터를 넣기 위해서는 <td> 요소를 사용합니다.
• 표 제목은 데이터의 의미를 명확히 해줍니다. 머릿글을 추가할 때는 <th> 요소를 사용합니다.
• <colspan> 속성을 사용하여 데이터가 걸쳐 있는 열을 만들 수 있습니다.
• <rowspan> 속성을 사용하여 데이터가 걸쳐 있는 행을 만들 수 있습니다.
• 표는 head, body, footer 세가지 섹션으로 분할할 수 있습니다.
• 표의 head는 <thead> 요소를 사용하여 만들 수 있습니다.
• 표의 body는 <tbody> 요소를 사용하여 만들 수 있습니다.
• 표의 footer는 <tfoot> 요소를 사용하여 만들 수 있습니다.
• 모든 CSS 속성은 이 표와 데이터에 적용할 수 있습니다.

 

 

---

 

<!DOCTYPE html>
<html>
<head>
  <title>Ship To It - Company Packing List</title>
  <link href="https://fonts.googleapis.com/css?family=Lato: 100,300,400,700|Luckiest+Guy|Oxygen:300,400" rel="stylesheet">
  <link href="style.css" type="text/css" rel="stylesheet">
</head>
<body>
  <ul class="navigation">
    <li><img src="https://content.codecademy.com/courses/web-101/unit-9/htmlcss1-img_logo-shiptoit.png" height="20px;"></li>
    <li class="active">Action List</li>
    <li>Profiles</li>
    <li>Settings</li>
  </ul>
  <div class="search">Search the table</div>
<table>
  <thead>
    <tr> <!-- Row 1 -->
      <th scope="col">Company Name</th>
      <th scope="col">Number of Items to  Ship</th>
      <th scope="col">Next Action</th>
    </tr>
  </thead>
  <tbody>
    <tr> <!-- Row 2 -->
      <td>Davie's Burgers</td>
      <td>2</td>
      <td rowspan="2">Send Invoice</td>
    </tr>
    <tr> <!-- Row 3 -->
      <td>Baker's Bike Shop</td>
      <td>3</td>
    </tr>
    <tr> <!-- Row 4 -->
      <td>Miss Sally's Southern</td>
      <td rowspan="2">4</td>
      <td rowspan="2">Ship</td>
    </tr>
    <tr> <!-- Row 5 -->
      <td>Summit Resort Rentals</td>
    </tr>
    <tr> <!-- Row 6 -->
      <td>Strike Fitness</td>
      <td>1</td>
      <td>Enter Order</td>
    </tr>
  </tbody>
  <tfoot>
    <td>Total</td>
    <td colspan="2">28</td>
  </tfoot>
</table>
</body>
</html>

body {
  background: #EEE;
  margin: 0;
  padding: 0;
}

/* Navigation */

.navigation {
  box-sizing: border-box;
  background-color: #3587A4;
  overflow: auto;
  padding: 18px 50px;
  position: relative;
  top: 0;
  width: 100%;
  z-index: 999;
}

ul {
  padding: 0;
  margin: 0;
}

li {
  color: #FFF;
  display: inline-block;
  font-family: 'Oxygen', sans-serif;
  font-size: 16px;
  font-weight: 300;
  letter-spacing: 2px;
  margin: 0;
  padding: 20px 18px 10px 18px;
  text-transform: uppercase;
}

.active {
  color: #88CCF1;
}

/* Table */

table {
  height: 40%;
  left: 10%;
  margin: 20px auto;
  overflow-y: scroll;
  position: static;
  width: 80%;
}

thead th {
  background: #88CCF1;
  color: #FFF;
  font-family: 'Lato', sans-serif;
  font-size: 16px;
  font-weight: 100;
  letter-spacing: 2px;
  text-transform: uppercase;
}

tr {
  background: #f4f7f8;
  border-bottom: 1px solid #FFF;
  margin-bottom: 5px;
}

th, td {
  font-family: 'Lato', sans-serif;
  font-size: 18px;
  font-weight: 400;
  padding: 20px;
  text-align: left;
  width: 33.3333%;
}

.search {
  background-color: #FFF;
  border: 1px solid #DDD;
  border-radius: 3px;
  color: #AAA;
  padding: 20px;
  margin: 50px auto 0px auto;
  width: 77%;
}