简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
집> 웹 프론트엔드> HTML 튜토리얼> 본문

HTML과 CSS를 사용하여 반응형 테이블 레이아웃을 만드는 방법

WBOY
풀어 주다： 2023-10-27 15:30:46
원래의
1456명이 탐색했습니다.

HTML과 CSS를 사용하여 반응형 테이블 레이아웃을 만드는 방법

HTML과 CSS를 사용하여 반응형 테이블 레이아웃을 만드는 방법

HTML은 웹 페이지의 구조를 구축하는 데 사용되는 마크업 언어인 반면, CSS는 웹 페이지의 스타일과 레이아웃을 지정하는 데 사용됩니다. 웹 디자인에서 테이블은 데이터를 표 형식으로 표시하는 데 사용되는 공통 요소입니다. 이 문서에서는 HTML과 CSS를 사용하여 반응형 테이블 레이아웃을 만드는 방법을 소개하고 구체적인 코드 예제를 제공합니다.

먼저 HTML 문서를 만들고 태그를 사용하여 테이블을 정의해야 합니다.
태그는 테이블의 최상위 컨테이너이며 일련의 태그를 포함할 수 있습니다. /code> 태그 데이터 행을 나타냅니다. 각 행의 데이터는 테이블의 셀인
태그로 정의됩니다. 标签来定义表格。
标签是表格的顶层容器，可以包含一系列的标签，每个标签表示一行数据。每个行中的数据是由
标签定义的，标签是表格中的单元格。

下面是一个简单的HTML表格结构的示例：

<table> <tr> <td>姓名</td> <td>年龄</td> <td>性别</td> </tr> <tr> <td>张三</td> <td>25</td> <td>男</td> </tr> <tr> <td>李四</td> <td>30</td> <td>女</td> </tr> </table>
로그인 후 복사

在上述示例中，我们创建了一个简单的包含3列和3行数据的表格。接下来，我们将使用CSS来设置表格的样式和布局。

为了使表格能够在不同设备上具有良好的显示效果，我们可以使用CSS的媒体查询来创建响应式的表格布局。媒体查询可以根据设备的宽度来动态改变样式。

下面是一个响应式表格布局的示例CSS代码：

/* 默认表格样式 */ table { width: 100%; border-collapse: collapse; } /* 表头样式 */ th { background-color: #f1f1f1; font-weight: bold; text-align: left; padding: 8px; } /* 表格数据样式 */ td { padding: 8px; } /* 媒体查询：在窗口宽度小于600px时改变表格布局 */ @media screen and (max-width: 600px) { table { border: none; } tr { border-bottom: 1px solid #ddd; display: block; margin-bottom: 10px; } td { border-bottom: 1px solid #ddd; display: block; text-align: right; } td::before { content: attr(data-label); float: left; font-weight: bold; text-transform: uppercase; } }
로그인 후 복사

在上述示例中，我们设置了表格的默认样式，并使用媒体查询来针对窗口宽度小于600px的设备进行布局调整。在小屏幕设备上，我们将表格的行和单元格设置为块级元素，并添加适当的边框和间距。同时，我们使用::before

다음은 간단한 HTML 테이블 구조의 예입니다.

rrreee

위의 예에서는 3개의 열과 3개의 행의 데이터가 있는 간단한 테이블을 만들었습니다. 다음으로 CSS를 사용하여 테이블의 스타일과 레이아웃을 지정하겠습니다.

테이블이 다양한 기기에서 잘 표시되도록 하기 위해 CSS 미디어 쿼리를 사용하여 반응형 테이블 레이아웃을 만들 수 있습니다. 미디어 쿼리는 장치의 너비에 따라 스타일을 동적으로 변경할 수 있습니다. 다음은 반응형 테이블 레이아웃을 위한 샘플 CSS 코드입니다. rrreee위 예에서는 테이블의 기본 스타일을 설정하고 미디어 쿼리를 사용하여 창 너비가 600px 미만인 장치의 레이아웃을 조정합니다. 작은 화면 장치에서는 표의 행과 셀을 블록 수준 요소로 설정하고 적절한 테두리와 간격을 추가합니다. 동시에 ::before의사 요소를 사용하여 각 셀에 레이블을 추가합니다. 위의 HTML 및 CSS 코드를 사용하면 반응형 테이블 레이아웃을 만들 수 있습니다. 사용자가 큰 화면의 데스크톱 장치에서든 작은 화면의 모바일 장치에서든 웹페이지를 볼 때 최상의 디스플레이 효과로 테이블을 표시할 수 있습니다. 이 기사가 HTML과 CSS를 사용하여 반응형 테이블 레이아웃을 만드는 방법을 이해하는 데 도움이 되기를 바랍니다. HTML, CSS의 다양한 속성과 기법을 유연하게 활용하면 더욱 아름답고 사용하기 쉬운 웹 디자인을 만들 수 있습니다.

위 내용은 HTML과 CSS를 사용하여 반응형 테이블 레이아웃을 만드는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨：
css html 响应式布局
원천：php.cn
이전 기사：HTML 레이아웃 가이드: 부동 요소를 사용하여 다중 열 레이아웃을 구현하는 방법 다음 기사：HTML과 CSS를 사용하여 반응형 이미지 그리드 레이아웃을 만드는 방법
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
저자별 최신 기사
최신 이슈
WordPress 6.0(add_editor_style)은 Gutenberg 편집기에서 style.css를 로드하지 않습니다. 저는 맞춤형 WordPress 블록 테마를 만들기 위해 UdemyWordPress 과정을 수강하고 있습니다. function.php에 블록 유형을 성공적으로 등록...
에서 2023-11-12 20:37:50
0
2
261
큰 숫자에서는 작동하지 않는 소수의 CSS 선행 0 최근에 100개가 넘는 목록 항목이 포함된 순서가 지정된 목록을 생성하는 문제에 직면했습니다. 나는 list-style:decimal-leading-zero;ol...
에서 2023-11-07 10:35:53
0
1
236
Sass 오류: 파일이 이미 로드되었습니다: @import '~src/css/quasar.variables.scss', 'quasar/src/css/variables.sass'; src\css\quasar.variables.scss 저는 퀘이사 프레임워크를 사용하고 있으며 프로젝트를 컴파일하는 동안 위의 오류 모듈 빌드 실패(./node_modules/sass-loader/dist/cjs.j...
에서 2023-11-06 21:38:55
0
1
219
HTML/CSS에 배경 비디오를 삽입하는 방법은 무엇입니까? 안녕하세요 여러분, 최근에 문제가 발생했습니다. 내 웹사이트에 비디오 배경을 설정하려고 하는데 중앙에 있는 텍스트가 맨 아래까지 계속 실행됩니다. 이유는 모르겠지...
에서 2023-11-06 13:59:13
0
1
240
JavaScript에서 색상이라는 CSS/HTML의 RGB 값을 얻는 방법 [name-rgb]라는 Javascript 개체를 만들었습니다. 기본: 명명된Colors={AliceBlue:[240,248,255],AntiqueWhite:[2...
에서 2023-11-06 09:05:50
0
2
210
관련 주제
더>
인기 추천
인기 튜토리얼
더>
관련 튜토리얼
인기 추천
최신 강좌
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿
회사 소개 부인 성명 Sitemap
PHP 중국어 웹사이트：공공복지 온라인 PHP 교육，PHP 학습자의 빠른 성장을 도와주세요！