페이지

2015년 7월 17일 금요일

HTML5 테이블 태그 정리

HTML5 테이블을 만들어 보려고 합니다.

<table><tr><th><td>로 테이블을 만들 수 있습니다.

<tr>테이블의 줄(table row),, <th> 테이블의 제목(table header), <td>는 테이블의 데이타(table data) 입니다.

그럼 간단하게 테이블을 만들어 보겠습니다.

<table>
  <tr>
    <th>국어</th>
    <th>영어</th>
    <th>수학</th>
  </tr>
  <tr>
    <td>70점</td>
    <td>60점</td>
    <td>50점</td>
  </tr>
<table>

아래와 같은 결과를 보실 수 있습니다.

국어 영어 수학
70점 60점 50점

테이블 테두리를 만들어 보겠습니다. 블로그에서는 안됩니다만 css로 한번에 속성을 지정해 줄 수도 있습니다.

<table style="border: 1px solid black;">
<tr style="border: 1px solid black;">
    <th style="border: 1px solid black;">국어</th>
    <th style="border: 1px solid black;">영어</th>
    <th style="border: 1px solid black;">수학</th>
  </tr>
<tr style="border: 1px solid black;">
    <th style="border: 1px solid black;">70점</th>
    <th style="border: 1px solid black;">60점</th>
    <th style="border: 1px solid black;">50점</th>
</tr>
</table>

국어 영어 수학
70점 60점 50점


댓글 없음:

댓글 쓰기