본문 바로가기
Web/HTML 기본 개념

[HTML]테이블 태그

by 박 현 황 2021. 3. 5.

기본적인 테이블 요소 태그

tr 표 내부의 행 
th table header의미 , 행 내부의 제목 태그
td table data의미, 행 내부의 일반 셀 태그

간단한 테이블 만들어보기

 

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <table>
        <tr>
            <th>제목 1</th>
            <th>제목 2</th>
        </tr>
        <tr>
            <td>제목1 관련 데이터</td>
            <td>제목2 관련 데이터</td>
        </tr>
        <tr>
            <td>제목1 관련 데이터</td>
            <td>제목2 관련 데이터</td>
        </tr>
    </table>
</body>
</html>

<tr> 태그를 통해서 가로로 한 줄씩 생성되는 것을 확인할 수 있다.

근데 지금 상태로는 테이블에 선이 없어서 구별하기가 어렵다.


 

border 표의 테두리 두께를 지정

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <table border="2">
        <tr>
            <th>제목 1</th>
            <th>제목 2</th>
        </tr>
        <tr>
            <td>제목1 관련 데이터</td>
            <td>제목2 관련 데이터</td>
        </tr>
        <tr>
            <td>제목1 관련 데이터</td>
            <td>제목2 관련 데이터</td>
        </tr>
    </table>
</body>
</html>

 

테이블 속성에 border를 추가해 줌으로써 조금 더 보기 간편해졌다.

'Web > HTML 기본 개념' 카테고리의 다른 글

[HTML]입력양식 태그  (1) 2021.03.05
[HTML]이미지, 오디오 , 비디오 삽입하기  (0) 2021.03.05
[HTML]테이블 열,행 합치기  (0) 2021.03.05
[HTML]글자 태그(2)  (0) 2021.03.02
[HTML]글자 태그(1) - h 태그  (0) 2021.03.02