반응형

안녕들 하시죠!

이번시간에는 HTML로 테이블을 만들어보겠습니다.

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
 <tr>
    <th>Firstname</th>
    <th>Lastname</th> 
    <th>Age</th>
  </tr>
  <tr>
    <td>Jill</td>
    <td>Smith</td> 
    <td>50</td>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td> 
    <td>94</td>
  </tr>
cs

 

 

이런식으로 출력됩니다.

테이블 사이에 선을 추가해 주려면 <head></head>에 border 스타일을 추가해줍니다.

 

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
<!DOCTYPE html>
<html>
<head>
<title>Table Ex</title>
 
<style>
table, th, td {
  border: 1px solid black;
}
</style>
 
</head>
<body>
 
<table style="width:5%;">
   <tr>
    <th>Firstname</th>
    <th>Lastname</th> 
    <th>Age</th>
  </tr>
  <tr>
    <td>Jill</td>
    <td>Smith</td> 
    <td>50</td>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td> 
    <td>94</td>
  </tr>
 
</body>
</html>
 
cs

 

 

 

 

 

2개의 선이 아닌 깔끔한 1개의 선으로 테이블을 만들고 싶다면 collapse를 추가해줍니다.

 

1
2
3
4
5
6
<style>
table, th, td {
  border: 1px solid black;
  border-collapse: collapse;
}
</style>
cs

 

 

HTML rowspan

테이블에서 열을 합칠 때 사용합니다.

 

1
<th rowspan ="2">Firstname</th>
cs

 

Fisrtname 만 rowspan을 사용해보겠습니다.

 

이런식으로 열이 합쳐지게됩니다.

조금 깔끔하게 만들어 보겠습니다.

 

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
<table style="width:5%;">
  <tr>
    <th>Firstname</th>
    <th>Lastname</th> 
    <th>Age</th>
  </tr>
  <tr>
    <td >Jill </td>
    <td>Smith</td> 
    <td>50</td>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td> 
    <td>94</td>
  </tr>
 
<tr>
    <th rowspan="2">Steven</th>
    <th rowspan="2">King</th>
    <td>10</td>
  </tr>
<tr>
   <td>33</td>
</tr>
cs

 

이런식으로 열을 합하거나 colspan을 사용하여 행을 합하여 사용하면 될 것 같습니다.

오늘은 여기까지입니다 감사합니다 !

+ Recent posts