Responsive HTML Table
This is a responsive HTML table that can be used on PC and mobile.
A responsive HTML table is a table that adapts and adjusts its layout based on the size of the screen or viewport on which it is being viewed. The goal is to ensure that the table remains readable and usable on different devices with varying screen sizes, such as desktops, laptops, tablets, and smartphones.
To create a responsive HTML table, we can use CSS and media queries. Here’s an explanation of the key components and techniques involved:
-
Table Structure: The table is structured using HTML table, thead, tbody, tr, th, and td tags. The table tag represents the table itself, while the thead and tbody tags group the table header and body content, respectively. Each row is defined using the tr tag, and the header and data cells are defined using the th and td tags, respectively.
-
CSS Styling: CSS is used to define the appearance and behavior of the table. In the given example, the table has a width of 100% to make it span the entire width of its container. The border-collapse property is set to “collapse” to merge the cell borders and create a cleaner look.
-
Media Queries: Media queries are used to apply specific CSS styles based on the screen size or viewport width. In the provided example, a media query is set to trigger when the screen width is 600px or less (@media screen and (max-width: 600px)). Within this query, additional CSS styles are applied to the table to make it responsive.
-
Table Display: Within the media query, the table’s display is changed to block and overflow-x is set to auto. This ensures that the table is displayed as a block-level element and gains horizontal scrolling when the content exceeds the screen width. The white-space: nowrap; property prevents the table cells from wrapping to multiple lines.
-
Column Width: To ensure readability on smaller screens, the minimum width of each table cell (th and td) is set to 150px within the media query. This allows the cells to retain their width even when the table is horizontally scrolled.
By combining these techniques, the responsive HTML table adjusts its layout dynamically, allowing users to view and interact with the table effectively on various devices, regardless of the screen size.
<!DOCTYPE html>
<html>
<head>
<style>
table {
width: 100%;
border-collapse: collapse;
}
th, td {
padding: 8px;
text-align: left;
border-bottom: 1px solid #ddd;
}
@media screen and (max-width: 600px) {
table {
display: block;
overflow-x: auto;
white-space: nowrap;
}
th, td {
min-width: 150px;
}
}
</style>
</head>
<body>
<table>
<thead>
<tr>
<th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
<th>Column 4</th>
<th>Column 5</th>
</tr>
</thead>
<tbody>
<tr>
<td>Row 1, Cell 1</td>
<td>Row 1, Cell 2</td>
<td>Row 1, Cell 3</td>
<td>Row 1, Cell 4</td>
<td>Row 1, Cell 5</td>
</tr>
<tr>
<td>Row 2, Cell 1</td>
<td>Row 2, Cell 2</td>
<td>Row 2, Cell 3</td>
<td>Row 2, Cell 4</td>
<td>Row 2, Cell 5</td>
</tr>
<tr>
<td>Row 3, Cell 1</td>
<td>Row 3, Cell 2</td>
<td>Row 3, Cell 3</td>
<td>Row 3, Cell 4</td>
<td>Row 3, Cell 5</td>
</tr>
</tbody>
</table>
</body>
</html>
반응형 HTML 테이블은 테이블이 화면 크기나 뷰포트에 따라 레이아웃을 조정하여 보기 좋고 사용하기 쉬운 테이블을 만드는 것을 말합니다. 이를 위해 CSS와 미디어 쿼리를 사용할 수 있습니다. 다음은 주요 구성 요소와 기술에 대한 설명입니다:
-
테이블 구조: HTML table, thead, tbody, tr, th, td 태그를 사용하여 테이블을 구성합니다. table 태그는 테이블 자체를 나타내며, thead와 tbody 태그는 각각 테이블의 헤더와 본문 콘텐츠를 그룹화합니다. 각 행은 tr 태그로 정의하며, 헤더 셀과 데이터 셀은 각각 th와 td 태그로 정의합니다.
-
CSS 스타일링: CSS를 사용하여 테이블의 모양과 동작을 정의합니다. 주어진 예제에서는 테이블이 컨테이너의 전체 너비를 차지하도록 width를 100%로 설정합니다. border-collapse 속성은 셀 테두리를 병합하여 깔끔한 모양을 만듭니다.
-
미디어 쿼리: 미디어 쿼리를 사용하여 화면 크기나 뷰포트 너비에 따라 특정 CSS 스타일을 적용합니다. 제공된 예제에서는 화면 너비가 600px 이하일 때 (@media screen and (max-width: 600px)) 미디어 쿼리가 트리거됩니다. 이 쿼리 내에서 테이블에 추가적인 CSS 스타일이 적용되어 반응형으로 만듭니다.
-
테이블 표시: 미디어 쿼리 내에서 테이블의 표시를 block으로 변경하고 overflow-x를 auto로 설정합니다. 이렇게 하면 테이블이 블록 수준 요소로 표시되며, 내용이 화면 너비를 초과하는 경우 가로 스크롤이 가능해집니다. white-space: nowrap; 속성은 테이블 셀이 여러 줄로 감싸지 않도록 합니다.
-
열 너비: 작은 화면에서 가독성을 보장하기 위해 미디어 쿼리 내에서 각 테이블 셀(th와 td)의 최소 너비를 150px로 설정합니다. 이렇게 하면 테이블을 가로로 스크롤할 때에도 셀의 너비가 유지됩니다.
이러한 기술을 결합하여 반응형 HTML 테이블은 동적으로 레이아웃을 조정하여 사용자가 다양한 디바이스에서 효과적으로 테이블을 보고 상호작용할 수 있도록 합니다. 이는 화면 크기에 관계없이 데스크톱, 랩톱, 태블릿, 스마트폰과 같은 다양한 디바이스에서 테이블을 효율적으로 사용할 수 있도록 해줍니다.
