'html 테이블 만들기'에 해당되는 글 1건


[HTML기초] 표만들기


오늘은 html기초
<table> <tr> <td> <th> colspan rowspan에 대하여 각각 알아보도록 하겠습니다.
 
 
 HTML 웹 문서에서 표(table)를 만드는 방법은

table 요소는 엑셀과 같이 데이터를 표 형태로 나타내기 위해 사용되며.
이전에는 table 요소를 이용하여 레이아웃을 만들 때 사용하기도 했지만 좋은 방법이 아니다.
그러면 표를 만들기 위해 사용되는 태그들에 대해서 알아보도록 하겠다.


<table> <tr> <td> <th>


 기본적인 테이블을 만들기 위해서는 <table>, <tr>, <td>, <th> 태그를 이용한다.
<table>은 표 형태를 만들며 <tr>은 행(row), <td>는 열(column), <th>는 표 제목을 정의하기 위해 사용된다

 

colspan, rowspan - 행 및 열의 개수를 합침

 행(row)이나 열(column)을 합치기 위해서는
<td> 또는 <th> 태그에 rowspan 또는 colspan 속성을 사용하며 합칠 셀의 수를 지정한다.


<!DOCTYPE>
<html>
    <head>
    </head>
    <body>
       <table width="500"border="1">
           <tr>
               <th colspan="2">구 분</th>
           </tr>
           <tr>
               <th>태그</th>
               <th>설명</th>
           </tr>
           <tr>
               <td>table</td>
               <td>표의 정의</td>
           </tr>
           <tr>
               <td>tr</td>
               <td>행의 정의</td>
           </tr>
           <tr>
               <td rowspan="2">td</td>
               <td>열의 정의</td>
           </tr>
           <tr>
               <td>속성 : rowspan, colspan</td>
           </tr>          
           <tr>
               <td rowspan="2">th</td>
               <td>표의 제목을 정의</td>
           </tr>
           <tr>
               <td>속성 : rowspan, colspan</td>
           </tr>          
       </table>
    </body>

위 코드의 결과값은 아래와 같습니다.


 

블로그 이미지

itworldkorea

IT korea가 세상(world)을 변화시킨다.

,