Programming Storytelling

html로 표생성하기 본문

HTML & CSS & JS

html로 표생성하기

HJdone 2019. 6. 3. 18:47

html에서 표를 만들어보는 방법을 알아보겠다.


이름 성별 주소
피카츄 여자 서울



위의 내용을 테이블로 만들고 싶다고 가정하자.

그럴땐 <td>태그를 이용하면 되는데
는 table data의 약자이며  <td>태그
만 사용해서는 테이블을 만들 수가 없다.
하지만 <tr>태그와 <table>태그를 이용하면 이를 해결할수 있다.

그 방법은 <tr>태그로 같은 행을 묶어주고 전체 테이블을 <table>태그로 정리하는 방식인데 이로써 진정한 테이블이 만들어 진다고 할 수 있다. 테이블에 테두리를 만들고 싶다면  <body>태그아래에<table border="값">을 주면된다.여기서 값은 테두리의 수를 나타낸다.<thead>태그와 <tbody>태그 두가지의 태그는 테이블의 헤더와 바디를 지정 해 준다. 지정해주지않아도 브라우저가 알아서 해주지만 표를 웹에 삽입하고 싶다면 이러한태그를  습관적으로 사용하도록하자. 그리고 추가적으로 <th>태그는 테이블의 헤더태그를 지정 해 주는데 
<th>태그는 표에서 가장 중점의 태그를 의미한다.그리고 <tfoot>태그는 사용할 시 테이블에서 가장아래칸으로 이동하는 특성이 있다. ​더나아가서 테이블을 병합하는 방법에 대해서도 알아보도록하자.
일단 행을 병합하고 싶다면 rowspan속성을 사용하면 되고 열을 병합하고 싶다면 colspan속성을 사용하면 된다.
각각의 속성들에게 특정 값을 주면 그만큼이 병합된다.

이제 간단한 예제를 통해서 위의 설명을 질서정연하게 표현 해 보도록 하겠다.

<html>
    <head>
            <meta charset="utf-8">
        <title>html로 표를 만들어 보기</title>
    </head>
        <body>
            <table border="2">
        <thead>
          <tr>
              <th>이름</th>
              <th>성별</th>
              <th>주소</th>
          </tr>
        </thead>
        <tbody>
          <tr>
              <td>피카츄</td>
              <td>여자</td>
              <td rowspan="2">서울</td>
          </tr>
       
          <tr>
                <td>꼬부기</td>
                <td>남자</td> 
            </tr>
        </tbody>
            <hfoot>
                <tr>
                    <td colspan="3">인원수</td>
                    <td>2명</td>
                </tr>
            </hfoot>
        </table>
    </body>   
</html>

위의 코드를 웹브라우저에 적용하면

html로 간단한 표 만들기

위와 같은 결과가 나온다.

 

'HTML & CSS & JS' 카테고리의 다른 글

2주차 개발일지  (0) 2021.12.19
1주차 개발일지  (0) 2021.12.16
html 공부하기  (0) 2019.06.03
변수 선언 방법 var,let,const 차이점과 특징  (0) 2019.04.20
함수표현식과 함수선언문의 차이점  (0) 2019.04.18
'HTML & CSS & JS' Related Articles more