본문 바로가기
frontend/HTML

table 태그 기본

by Mr.코딩 2023. 7. 20.

table 태그에 대해 중학생 수준으로 설명해.

 

<table>
    <tr>
        <th>헤더 셀</th>
        <th>헤더 셀</th>
    </tr>
    <tr>
        <td>데이터 셀</td>
        <td>데이터 셀</td>
    </tr>
    <tr>
        <td>데이터 셀</td>
        <td>데이터 셀</td>
    </tr>
</table>

코드 실행된 모습

HTML에서 table 태그는 

표를 만들 때 사용되는 태그입니다. 표는 행과 열로 구성되며, 데이터를 구조화하여 표시할 때 유용합니다. table 태그는 다음과 같은 구조로 사용됩니다:

 

  •  `<table>`: 표 전체를 감싸는 가장 바깥쪽 태그입니다.
  •  `<tr>`: 표의 행(row)을 나타내는 태그입니다. `table` 태그 내에 위치해야 하며, 각각의 행은 `<tr>` 태그로 감싸집니다.
  •  `<th>`: 표의 헤더 셀(header cell)을 나타내는 태그입니다. 표의 첫 번째 행(`<tr>`)에서 사용되며, 일반적으로 굵은 글씨로 표시됩니다.
  •  `<td>`: 표의 데이터 셀(data cell)을 나타내는 태그입니다. 표의 내용을 담고 있는 셀로, `<tr>` 태그 내에서 사용됩니다.

 

위의 예제에서는 표를 2x2 크기로 만들었습니다. 첫 번째 행은 헤더 셀로 구성되고, 나머지 두 개의 행은 데이터 셀로 구성됩니다.

표의 크기와 스타일은 CSS를 사용하여 조정할 수 있습니다. 표의 테두리 두께, 배경색, 글꼴 등을 변경할 수 있으며, 더 다양한 기능을 사용하여 표를 꾸밀 수도 있습니다.

표는 데이터를 정리하고 구조화하는 데 유용한 HTML 요소입니다. 중학생 수준으로 간단하게 설명해 드렸으니 표를 만드는 데 도움이 되었기를 바랍니다!

위 코드에 CSS로 표 테두리를 만들어 봐.

 

아래는 `<table>` 태그의 표에 CSS를 추가하여 테두리를 만드는 예제 코드입니다.

 

<!DOCTYPE html>
<html>
<head>
<style>
    table {
        border-collapse: collapse;
        width: 100%;
    }

    th, td {
        padding: 8px;
        text-align: left;
        border: 1px solid black;
    }
</style>
</head>
<body>
    <table>
        <tr>
            <th>헤더 셀</th>
            <th>헤더 셀</th>
        </tr>
        <tr>
            <td>데이터 셀</td>
            <td>데이터 셀</td>
        </tr>
        <tr>
            <td>데이터 셀</td>
            <td>데이터 셀</td>
        </tr>
    </table>
</body>
</html>

 

위의 코드에서 `<style>` 태그 내에 추가된 CSS는 다음과 같습니다:

  • `table`: `border-collapse: collapse;` 속성은 테두리를 합치도록 설정합니다.
  • `th, td`: `padding: 8px;`는 테이블 셀의 안쪽 여백을 설정하고, `text-align: left;`는 텍스트를 왼쪽 정렬로 설정합니다.
  • `border: 1px solid black;`는 각 셀의 테두리를 1픽셀 두께의 검은색 선으로 설정합니다.

 

실행 결과, 창이 좌우로 작아지면 테이블도 같이 작아짐

 

위의 코드를 실행하면 표에 테두리가 추가됩니다. `<th>` 태그와 `<td>` 태그의 셀 모두에 테두리가 적용되며, 셀 내부의 내용은 왼쪽 정렬되고 셀의 안쪽 여백도 설정됩니다.

이렇게 CSS를 사용하여 `<table>` 태그의 표에 테두리를 추가할 수 있습니다. 원하는 경우 CSS 속성을 수정하여 테두리의 두께, 색상, 스타일 등을 조정할 수 있습니다.

table  태그에서 '열'을 나타내는 태그는 없나 보네?

 

HTML의 `table` 태그에서는 '열'을 나타내는 별도의 태그는 제공되지 않습니다. 테이블의 열(column)은 `table` 태그 내에서 `th` 또는 `td` 태그를 사용하여 정의됩니다.

1. `<th>` 태그: `<th>` 태그는 테이블의 헤더 셀(header cell)을 나타냅니다. 테이블의 첫 번째 행(`<tr>`)에서 사용되며, 일반적으로 굵은 글씨로 표시됩니다. 각 `<th>` 태그는 하나의 열을 나타냅니다.

2. `<td>` 태그: `<td>` 태그는 테이블의 데이터 셀(data cell)을 나타냅니다. 테이블의 내용을 담고 있는 셀로, `<tr>` 태그 내에서 사용됩니다. 각 `<td>` 태그는 하나의 열에 해당하는 데이터를 포함합니다.

 border-collapse: collapse;
        width: 100%;  에서 with: 100%는 무슨 뜻?

 

`width: 100%;`는 테이블의 너비를 부모 요소에 대해 100%로 설정하는 CSS 속성입니다. 

`width` 속성은 요소의 너비를 지정하는 데 사용됩니다. `100%` 값은 부모 요소의 너비에 대해 100%를 의미하며, 즉 부모 요소의 너비와 동일한 너비를 가지도록 테이블을 확장합니다.

위의 예제 코드에서 `table` 태그에 `width: 100%;`를 설정함으로써 테이블이 부모 요소의 너비에 딱 맞게 펼쳐지도록 설정하였습니다. 이는 테이블이 부모 요소 내에서 가로로 꽉 차게 표시되도록 합니다.

`width: 100%;`를 사용하여 너비를 설정하면, 테이블이 화면의 가로 공간을 최대한 활용하고, 테이블 셀이 균등하게 분포될 수 있도록 합니다.

따라서 `width: 100%;`는 테이블의 너비를 부모 요소의 너비에 대해 100%로 설정하는 CSS 속성입니다.

네 코드를 테스트 해 보니 좌우로 브라우저 크기를 줄이니, 테이블도 같이 줄어들다가 특정 위치에서 더 테이블이 줄어들지 않네?

 

테이블의 가로 크기가 특정 위치에서 더 이상 줄어들지 않는 이유는 CSS 속성 `width: 100%;` 때문일 수 있습니다. 

`width: 100%;`는 테이블을 부모 요소의 너비에 대해 100%로 설정하므로, 테이블은 부모 요소의 가로 공간을 모두 차지하게 됩니다. 이로 인해 브라우저 창의 크기를 줄일 때 테이블도 함께 줄어들지만, 어느 시점에서는 더 이상 줄어들지 않는 것을 볼 수 있습니다.

이는 브라우저 창의 최소 너비를 의미합니다. 브라우저는 콘텐츠가 화면에 가로로 표시되도록 최소 너비를 유지하려고 합니다. 따라서 테이블의 너비가 최소 너비까지 줄어들었을 때, 브라우저는 테이블을 더 이상 줄이지 않고 최소 너비를 유지합니다.

만약 테이블이 더 작은 크기로 줄어들게 하려면, 다른 방식으로 테이블의 크기를 조정해야 합니다. 예를 들어, 테이블을 감싸는 부모 요소의 너비를 제한하거나, 테이블의 내용이 잘리지 않도록 가로 스크롤을 추가하는 등의 방법을 사용할 수 있습니다.

브라우저 크기를 줄일 때 테이블이 원하는 방식으로 동작하도록 하려면, 다른 CSS 속성 또는 레이아웃 방식을 사용하여 조정해야 합니다. 필요한 경우 테이블의 `width` 값을 고정 크기로 설정하거나, `max-width` 속성을 활용하여 최대 너비를 제한하는 방법을 고려해볼 수도 있습니다.

'frontend > HTML' 카테고리의 다른 글

문서 구조화하기  (0) 2023.07.21
HTML5 144개의 태그 중 가장 많이 쓰이는 것  (0) 2023.07.21
flexbox 태그  (0) 2023.07.21
div 태그 - 일단 큰 덩어리를 나눠 놓을 것  (0) 2023.07.20
HTML 문서의 기본 구조에 대한 설명  (0) 2023.07.20
예약 캘린더 구축 : 테이블 태그 또는 캘린더 라이브러리 1  (0) 2023.07.19
테이블과 스프레드시트  (0) 2023.07.19
HTML에 대해 초등학생/중학생/대학생에게 설명해줘  (0) 2023.07.18

관련글

티스토리툴바