CSS에서 테이블 스타일을 구현하는 방법

CSS에서 테이블 스타일을 구현하는 방법: 먼저 HTML 샘플 파일을 만든 다음 td 태그의 "colspan, rowspan" 속성을 설정하고 마지막으로 "배경색"과 같은 스타일을 설정하여 테이블 스타일을 구현합니다.

이 기사의 운영 환경: Windows7 시스템, HTML5&&CSS3 버전, Dell G3 컴퓨터.

CSS에서 테이블 스타일을 구현하는 방법은 무엇입니까?

html과 CSS를 사용하여 아름다운 테이블 만들기

최종 효과: html과 CSS를 사용하여 간단하고 사용하기 쉬운 아름답고 넉넉한 테이블을 만듭니다.

---

머리말:

• CSS가 출현하기 전에는 웹 페이지에서 일반적으로 테이블 레이아웃을 사용했습니다.
• 이제는 시대가 바뀌었기 때문에 테이블은 더 이상 웹 페이지 레이아웃에 적합하지 않습니다. 테이블 렌더링 속도가 너무 빠릅니다 느림
브라우저는 렌더링이 완료될 때까지 테이블을 표시하지 않습니다
• 
  
그러나 테이블은 여전히 ​​유용합니다.

개발자에게 테이블은 일반적으로 백그라운드 관리 시스템에서 사용됩니다

초심자
2. 의 경우 이 양식은 특히 사용하기 쉽고 절묘한 효과를 제공합니다.

웹사이트는 일반적으로 프런트엔드와 백엔드의 두 부분으로 나뉩니다.

프런트엔드: 사용자용

• 백엔드: 관리자용(높은 요구사항은 아님) 인터페이스, 그러나 기능성) 높음)

이제 h5 시대가 다가오고 있습니다. HTML은 웹사이트의 뼈대만을 담당합니다(검색 엔진의 경우). 보기); 그리고 웹사이트의 스타일은 CSS를 기반으로 합니다

1: 테이블 태그 설명

테이블(테이블)
• 테이블 아래에 4개의 하위 태그가 있습니다. 태그: caption, thead, tbody, tfoot (작성 가능 여부) )
  
테이블 제목(캡션)
Header(thead)
• 하위 요소 tr
  
table body(tbody)
• tr
  
foot (tfoot)
• 하위 요소가 있습니다. tr
  table 요소는 여러 요소의 행으로 구성되고,
table row (tr)
• 에는 th 및 td
  라는 하위 요소가 있습니다. 행과 열로 여러 개의 셀로 나누어져 있는데,
제목 셀(th), 셀(td)
• 관례적으로 th는 thead에 나타납니다
  

2: 순수 HTML 효과 정말 보기 흉한데 뒤돌아보면 , CSS를 추가하면 미운 오리새끼는 백조가 됩니다

html :
코드가 길고 지루해서 다 보여드리지는 않겠습니다. (tbody 태그의 접힌 내용은 10 tr 태그이고, 각 tr 태그에는 내부에 5개의 td 태그가 있습니다)

테이블 단위 그리드 병합

td 태그의 두 가지 속성: colspan, rowspan
• 
  Cross-column: <td colspan="5">&lt ;/td>, 위와 같이 한 행에 5개의 열 셀을 병합합니다. 여러 행에 걸쳐 셀 <li>: <code><td rowspan="2"></td>, 2개 병합 한 열의 셀 행 <td colspan="'5'"></td>，如上，合并一行中的5列单元格
• 跨行：<td rowspan="'2'"></td>，合并一列中的2行单元格

三：用CSS修改表格样式



css：

table{
    width: 100%;
    border-collapse: collapse;}table caption{
    font-size: 2em;
    font-weight: bold;
    margin: 1em 0;}th,td{
    border: 1px solid #999;
    text-align: center;
    padding: 20px 0;}table thead tr{
    background-color: #008c8c;
    color: #fff;}table tbody tr:nth-child(odd){
    background-color: #eee;}table tbody tr:hover{
    background-color: #ccc;}table tbody tr td:first-child{
    color: #f40;}table tfoot tr td{
    text-align: right;
    padding-right: 20px;}

有兴趣的可以继续看看：

四：上述CSS中几个有意思的知识点

border-collapse

border-collapse是table标签的一个属性，有两个取值：

1. seperate 边框之间分离
2. collapse

3: CSS를 사용하여 표 스타일 수정



css:

table tbody tr:nth-child(odd)

관심이 있으시면 계속 읽어보세요.
4: 위 CSS의 몇 가지 흥미로운 지식 포인트🎜 🎜🎜🎜🎜🎜border-collapse🎜🎜🎜🎜border-collapse는 테이블 태그의 속성으로, 두 가지 값이 있습니다: 🎜🎜🎜separate 테두리 간 분리 🎜🎜collapse code> 두 개의 인접한 테두리 병합 🎜🎜🎜🎜🎜:nth-child()🎜🎜🎜 🎜:nth-child()는 의사 클래스입니다🎜🎜🎜가사 클래스는 일종의 선택기입니다🎜🎜<pre class="brush:php;toolbar:false">table tbody tr td:first-child</pre>🎜의미 : 🎜tr 요소여야 하며, 테이블 tbody🎜🎜 아래의 홀수 하위 요소여야 합니다.<p>正是用这个伪类，我实现了表格中表格主体内的奇数行和偶数行的背景颜色不同</p> <p>（）内的参数：</p> <ul> <li> <code>odd或者2n+1：第奇数个
• even或者2n：第偶数个
• 6n：第6、12、18、24、… 、6n个
• 5：第5个

:first-child()

:first-child()是伪类

table tbody tr td:first-child

意思：选中table tbody tr下，第一个子元素并且必须是td元素

利用这个伪类，我实现了将表格主体的第一列全部单元的背景颜色改了

:hover

:hover是伪类

table tbody tr:hover

意思：选中鼠标悬停的table tbody下tr标签

即我通过这个伪类，实现了我鼠标悬停在表格主体的某个地方时，整行变色

最终效果：利用html、css制作一个美观、大方的表格，而且很简单，容易上手。

---

前言：

• 在css出现之前，网页通常使用表格布局；
• 如今，时代变了，表格不再适用于网页布局，
• 因为表格的渲染速度过慢
  浏览器要将表格渲染完，才会显示

不过，表格还是有用的：

1. 对于开发者来说，一般在后台管理系统中使用到表格
2. 对于初学者来说，表格特别容易上手，并且制作出精美的效果

网站通常分为前台、后台两部分

• 前台：面向用户
• 后台：面向管理员（对界面要求不高，对功能性要求高）

如今，h5的时代正在来临，我们需要明确一个观点，HTML只负责网站的骨架，html标签元素是有语义化的（给搜索引擎看的）；而网站的样式是靠css来负责的

一：表格标签讲解

• 表格（table）
  table标签下有这么四个子标签：caption、thead、tbody、tfoot（可写可不写）
• 表格标题（caption）
• 表头（thead）
  有子元素 tr
• 表格主体（tbody）
  有子元素 tr
• 表尾（tfoot）
  有子元素 tr
• 表格是一行一行元素组成的，表格行（tr）
  有子元素 th 和 td
• 表格被行、列划分为多个单元，标题单元格（th）、单元格（td）
  习惯上，th 出现在thead内

二：纯HTML效果

确实丑，但是往后面看，加了css后，丑小鸭就变白天鹅了

html：

代码又长又无趣，我就不把它全部显示出来了（tbody标签折叠的内容就是10个tr标签，每个tr标签内部有5个td标签）

• 表格的单元格合并
  td标签的两个属性：colspan、rowspan
• 跨列：<td colspan="'5'"></td>，如上，合并一行中的5列单元格
• 跨行：<td rowspan="'2'"></td>，合并一列中的2行单元格

三：用CSS修改表格样式

css：

table{
    width: 100%;
    border-collapse: collapse;}table caption{
    font-size: 2em;
    font-weight: bold;
    margin: 1em 0;}th,td{
    border: 1px solid #999;
    text-align: center;
    padding: 20px 0;}table thead tr{
    background-color: #008c8c;
    color: #fff;}table tbody tr:nth-child(odd){
    background-color: #eee;}table tbody tr:hover{
    background-color: #ccc;}table tbody tr td:first-child{
    color: #f40;}table tfoot tr td{
    text-align: right;
    padding-right: 20px;}

有兴趣的可以继续看看：

四：上述CSS中几个有意思的知识点

border-collapse

border-collapse是table标签的一个属性，有两个取值：

1. seperate 边框之间分离
2. collapse 两两相临边框合并

:nth-child()

:nth-child()是伪类

伪类是选择器的一种

table tbody tr:nth-child(odd)

意思：必须是tr元素，必须是table tbody下的第奇数个子元素

正是用这个伪类，我实现了表格中表格主体内的奇数行和偶数行的背景颜色不同

（）内的参数：

• odd或者2n+1：第奇数个
• even或者2n：第偶数个
• 6n：第6、12、18、24、… 、6n个
• 5：第5个

:first-child()

:first-child()是伪类

table tbody tr td:first-child

意思：选中table tbody tr下，第一个子元素并且必须是td元素

利用这个伪类，我实现了将表格主体的第一列全部单元的背景颜色改了

:hover

:hover是伪类

table tbody tr:hover

意思：选中鼠标悬停的table tbody下tr标签

即我通过这个伪类，实现了我鼠标悬停在表格主体的某个地方时，整行变色
【推荐学习：css视频教程】

위 내용은 CSS에서 테이블 스타일을 구현하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!