Hongfluenza

column과 row 본문

STUDY/HTML5 & CSS

column과 row

Hongfluenza 2018. 10. 14. 01:21


이제까지 내가 알던 행은 가로줄, 열은 세로줄 이었는데 


책에 나온 실습 내용과 설명을 비교해보니 아리송한 부분이 있어서 인터넷을 검색해봤다.



출처 : http://kenarie.tistory.com/114



세로가 row 인데 행이고 가로가 column인데 열


엥 ???


일단 나온대로 외우기로 하고 책을 봤다.


rowspan

: 다른 row(줄)에 있는 칸을 합치는 것



이 설명에 따르면 줄 = 행 이라는 소린가 ? 


그림을 참고 하면 세로로 합친다는 것으로 이해하면 되겠다.


책에 있는 실습을 참고해 보면


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
<!DOCTYPE html>
<html>
  <head>
    <title>rowspan 실습</title>
    <style>
      table, th, td {
        border : 1px solid black;
      }
    </style>
  </head>
 
  <body>
    <br />rowspan 적용<br />
    <table>
      <tr>
        <th>월</th>
        <th>저축</th>
        <th>휴일 저축</th>
      </tr>
      <tr>
        <td>1월</td>
        <td>100만원</td>
        <td rowspan="20">50만원</td>
      </tr>
      <tr>
        <td>2월</td>
        <td>80만원</td>
      </tr>
    </table>
  </body>
</html>
 
cs



핵심은 23번 째 줄이다.



colspan

: 같은 column(열)에 있는 칸을 합치는 것


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
<!DOCTYPE html>
<html>
  <head>
    <title>colspan 실습</title>
    <style>
      table,th,td {
        border : 1px solid black;
      }
    </style>
  </head>
  <body>
    <br />colspan적용<br />
    <table>
      <tr>
        <th>월</th>
        <th>저축</th>
      </tr>
      <tr>
        <td>1월</td>
        <td>100만원</td>
      </tr>
      <tr>
        <td>2월</td>
        <td>80만원</td>
      </tr>
      <tr>
        <td colspan="2">합계: 180만원</td>
      </tr>
    </table>
  </body>
</html>
 
cs


핵심은 27번 째 줄이다.


실습 결과를 통해서 간단하게 요약하자면


rowspan은 세로로 합치기

colspan은 가로로 합치기


로 간단하게 생각하기로 했다. 


저작자표시

'STUDY > HTML5 & CSS' 카테고리의 다른 글

cellspacing과 cellpadding 차이점  (0) 2018.10.14
비순서 리스트  (0) 2018.10.11
순서 리스트  (0) 2018.10.11
html 태그  (0) 2018.05.15
'STUDY/HTML5 & CSS' Related Articles more