Table 다루기

  • 기초 단축키
    • 주석 : ctrl + /
    • 라이브 서버 실행 : ALT + L + O
    • HTML 기본 구성 요소 꺼내기 : ! + Enter

결과물

"rowspan", "colspan", "align", "th", "bgcolor", "border" 등의 기능을 사용하여 테이블을 꾸미는 실습을 진행합니다.

  1. "rowspan" : 아래로 정해진 숫자만큼 행을 병합합니다.
  2. "colspan" : 아래로 정해진 숫자만큼 열을 병합합니다.
  3. "align" : 텍스트의 정렬 방향을 결정합니다.
  4. "th" : 표의 헤더 부분을 작성합니다.
  5. "bgcolor" : 배경색을 설정합니다.
  6. "border" : 표 테두리의 두께를 설정합니다.

 

가장 기본적인 표

    <table border = '1px solid black'>
        <tr>
            <td>1번칸</td>
            <td>2번칸</td>
            
        </tr>

        <tr>
            <td>3번칸</td>
            <td>4번칸</td>
        </tr>

        <tr>
            <td>5번칸</td>
            <td>6번칸</td>
        </tr>
    </table>

 

가장 기본적인 표 구조입니다.

<table border = '1px solid black'>을 통하여 표 테두리의 두께를 설정합니다.

<tr></tr>을 통해 행을 지정하고, <td></td>를 설정하여 각 열마다 정보를 대입합니다.

총 3행 2열의 테이블이 생성됩니다.

 

"rowspan", "colspan" 활용

<table border="">
        <tr>
            <td>메뉴</td>
            <td>가격</td>
            <td>특이사항</td>
        </tr>

        <tr>
            <td>아메리카노</td>
            <td>3000</td>
            <td rowspan="3">사계절 가능</td>
        </tr>

        <tr>
            <td>카페라떼</td>
            <td>3500</td>
        </tr>

        <tr>
            <td>자바칩프라푸치노</td>
            <td>4500</td>
        </tr>

        <tr>
            <td colspan="3">청귤에이드는 조금만 기다려주세요</td>
        </tr>
    </table>

 

rowspan과 colspan을 모두 활용한 테이블 구조입니다.

아메티카노의 3번째 컬럼 아래로 행 3개를 병합하고 싶기 때문에 <td rowspan ="3">사계절 가능</td>로 작성했습니다.

마지막 행에서는 해당 열들을 모두 병합하고 싶기 때문에 <td colspan="3"></td>를 사용했습니다.

총 5행 3열의 테이블이 생성되며 이중에서 3개의 행이 병합된 부분이 있고, 마지마 행의 컬럼은 모두 병합됩니다.

 

th, width, bgcolor, align을 활용한 테이블 꾸미기

<table border = "1px solid balck" width = "300px">
        <tr bgcolor = 'pink'>
            <th width = '100px'> 메뉴 </th>
            <th>가격</th>
            <th>특이사항</th>
        </tr>

        <tr>
            <td>아메리카노</td>
            <td align = 'right'>3000</td>
            <td rowspan='3'>사계절가능</td>
        </tr>

        <tr>
            <td>카페라떼</td>
            <td align = 'right'>3500</td>
        </tr>

        <tr>
            <td>자바칩프라푸치노</td>
            <td align = "right">4500</td>
        </tr>

        <tr>
            <td colspan = '3'>청귤에이드는 조금만 기다려주세요~</td>
        </tr>

    </table>

<table border = "1px solid black" width = "300px">를 통하여 테두리의 색과 두께, 전체 테이블의 너비를 정합니다.

<tr bgcolor = 'pink'> 를 통해 해당 행의 배경색을 지정합니다.

<th width = 100px>메뉴</th>를 통해 테이블 헤더 부분 컬럼 내용을 작성합니다.

<td align = 'right'>3000</td>를 통하여 해당 글자를 오른쪽으로 정렬합니다.

<td rowspan = '3'>사계절가능</td>을 통하여 해당 행 아래로 3개의 행들을 병합합니다.

<td colspan='3'>청귤에이드는 조금만 기다려주세요~</td>를 통하여 해당 행의 컬럼 3개를 병합합니다.

 

'HTML > HTML 기초' 카테고리의 다른 글

HTML, CSS - Box 다루기  (0) 2024.04.12

Box 다루기

  • 기초 단축키
    • 주석 : ctrl + /
    • 라이브 서버 실행 : ALT + L + O
    • HTML 기본 구성 요소 꺼내기 : ! + Enter
 

HTML 코드    

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            width : 300px;
            height : 300px;
            border : 15px solid gray;
            padding : 20px;
            background-color: moccasin;
        }
        .bb{
            box-sizing: border-box;
            background-color: skyblue;
        }
    </style>


</head>
<body>
    <div class = 'cb'>
    </div>
        <p>content-box</p>
    <div class = 'bb'>
        <p>border-box</p>
    </div>

</body>
</html>

 

<div></div>에서 전체 컨텐츠에 대한 형식을 지정합니다.

이 경우에는 너비, 높이, 테두리 넓이, padding, 배경색을 지정했습니다.

.bb 클래스에 대해서는 box-sizing을 별로도 border-box로 만들고, 색도 다르게 설정했습니다.

이렇게 꾸미는 과정을 진행하기 위해서는 <head></head> 안에 <style></style>을 만들고 진행합니다.

 

 

 

출력 결과

 

출력 결과는 위와 같습니다.

cb 클래스는 별도의 꾸미는 과정을 진행하지 않아 div의 내용이 그대로 적용되었고, 그 안에 p 태그를 통해 대입한 content-box 텍스트가 삽입되었습니다.

bb 클래스에는 div 외에 새롭게 정의한 내용인 border-box가 적용되었음을 확인할 수 있습니다.

위의 box와 마찬가지로 p 태그를 통해 텍스트를 추가했습니다.

'HTML > HTML 기초' 카테고리의 다른 글

HTML - Table 다루기  (0) 2024.04.14

+ Recent posts

티스토리툴바