본문 바로가기

IT개발 과정 [취성패 학원]/Frontend

[HTML]03. 표관련태그

<!DOCTYPE html>
<html>
    <head>
        <title>표 관련 태그</title>
    </head>
    <body>
        <!--
            표 : 문서에서 다량의 데이터를 정리해서 표현하고자 할 때 사용
                 행과 열로 이루어져있음
                 행과 열이 만나는 지점을 셀이라고 함

            표를 구성하는 태그는 <table>, <tr>, <th>, <td>

            <tr></tr> : 표의 한 행을 나타내는 태그

            <th></th> : 표의 제목 셀을 나타내는 태그 => 가운데 정렬, 글자 굵게
            <td></td> : 표의 일반 셀을 나타내는 태그

        -->

        <h1>기본적인 표 만들기 (4행 3열)</h1>

        <table border="1">
            <tr>
                <th width="130" height="30">브라우저명</th>
                <th width="80">제조사</th>
                <th width="200">홈페이지</th>
            </tr>
            <tr>
                <td>Internet Explorer</td>
                <td>MS</td>
                <td>http://www,microsoft.com</td>
            </tr>
            <tr>
                <td>Chrome</td>
                <td>Google</td>
                <td>http://www.google.com</td>
            </tr>
            <tr>
                <td>Firefox</td>
                <td>Mozila</td>
                <td>http://www.mozilla.org</td>
            </tr>

        </table>


    </body>
</html>

결과물,,!!

 

'IT개발 과정 [취성패 학원] > Frontend' 카테고리의 다른 글

[HTML]02. 목록관련태그  (0) 2021.03.31
[HTML] 01. 글자관련태그  (0) 2021.03.31