08：CSS设置表格样式

最新推荐文章于 2024-05-14 16:52:58 发布
最新推荐文章于 2024-05-14 16:52:58 发布
阅读量137 收藏
点赞数
分类专栏： CSS HTML 文章标签： CSS
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/fighting_0808/article/details/81782433
版权
HTML 同时被 2 个专栏收录
16 篇文章 0 订阅
订阅专栏
CSS
12 篇文章 0 订阅
订阅专栏

1.一个简单的表格
table.html

<!doctype html>
<html>
<head>
  	<meta charset="utf-8">
  	<title>表格样式</title>
    <link href="box.css" type="text/css" rel="stylesheet">
</head>
<body>
  <center>
  <table class="class">
      <caption>课程表</caption>
      <thead>
        <tr>
            <th>星期\课程</th>
            <th>星期一</th>
            <th>星期二</th>
            <th>星期三</th>
            <th>星期四</th>
            <th>星期五</th>
      </tr>
      </thead>
      <tbody>
      <tr>
            <th>1-2节</th>
            <td>数学</td>
            <td>语文</td>
            <td>化学</td>
            <td>英语</td>
             <td>英语</td>
      </tr>

      <tr>
            <th>3-4节</th>
            <td>英语</td>
            <td>物理</td>
            <td>化学</td>
            <td>英语</td>
             <td>体育</td>
      </tr>
      
      <tr>
            <th>5-6节</th>
            <td>数学</td>
            <td>物理</td>
            <td>体育</td>
            <td>化学</td>
            <td>美术</td>
      </tr>

      <tr>
            <th>7-8节</th>
            <td>数学</td>
            <td>美术</td>
            <td>化学</td>
            <td>英语</td>
            <td>体育</td>
      </tr>
      <tr>
            <th>9-10节</th>
            <td>生物</td>
            <td>美术</td>
            <td>生物</td>
            <td>英语</td>
            <td>物理</td>
      </tr>
      </tbody>
    </table>
  </center>
  </body>
</html>

table.css

table,td,th{
	border:1px solid #aaa;
	font-size: 23px;
	
}

2.边框合并：boder-collapse
属性值：
separate;（分开，默认）
collapse;（合并）

table.css

table,td,th{
	border:1px solid #aaa;
	font-size: 23px;
	border-collapse:collapse;
}

3.边框间距border-spacing(前提是：border-collapse:separate;)

table.css

table,td,th{
	border:1px solid #aaa;
	font-size: 23px;
	border-collapse:separate;
	border-spacing: 45px;
}

4.设置表格标题的位置caption-side
属性值：
top;//默认
bottom;
left;
right;

table.css

table,td,th{
	border:1px solid #aaa;
	font-size: 23px;
	border-collapse:separate;
	border-spacing: 45px;
	caption-side:bottom;
}

5.当单元格对象宽度超过单元格所定义的宽度时，可用table-layout：fixed保持表格宽度不被改变
属性值：auto(默认)
fixed(宽度固定)
table.css

table,td,th{
	border:1px solid #aaa;
	font-size: 23px;
	border-collapse:separate;
	border-spacing: 5px;
	table-layout: fixed;
	caption-side:top;

}

19:30 2018/8/17/周五
布吉
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
好看table样式 好看的CSS——Table样式表
04-01
网络上收集的css table样式 好看table样式 好看的CSS——Table样式表
CSS基础：table的4个标签的样式详解（6000字长文！附案例）
u013179804的博客
04-19 6000
之前在 HTML 基础部分，我们讲解了表格的结构和写法。简单回顾下。包含等表格部分。和分别包含多个行。行中可以包含或单元格，用来显示表格的标题或数据。本文，我们来给它们增加一些漂亮的样式。图为增加样式前，增加样式后的效果，是不是确实漂亮多了。ok，那我们一起来看看这些表格标签的样式属性吧。
CSS 基础教程：表格（一）
最新发布
m0_65012566的博客
05-14 578
表格是一个HTML元素，用于以带有行和列的结构化格式显示数据。表格使用HTML中的<table>标签创建，并且可以使用CSS属性进行样式设置。本章讨论如何使用CSS设置HTML表格的不同属性。首先看看下面的示例，它演示了一个简单的HTML表格：</</</</</</</</</</</</</</</</</</上述示例中的表格是数据的简单显示，可以使用CSS进行样式设置。widthheighttext-alignborder让我们看看如何在以下各节中使用这些属性的示例。
好看的table-css样式
qq_45450789的博客
04-13 5867
1.单像素边框css表格 源代码： <style type="text/css"> table.gridtable { font-family: verdana,arial,sans-serif; font-size:11px; color:#333333; border-width: 1px; border-color: #666666; border-collapse: collapse; } table.gridtable t.
如何使用 CSS 设置 HTML 表格样式
热门推荐
allway2的博客
05-30 1万+
在 Web 开发的早期，HTML 表格非常基础，缺乏广泛的样式选项。然而，今天，大多数表格的样式都旨在为用户创造更美观和更实用的体验。 CSS 为样式表提供了许多属性。这些属性允许您（除其他外）分隔表格中的单元格、指定表格边框以及指定表格的宽度和高度。 本教程将通过示例讨论如何使用 CSS 设置表格样式。在本教程结束时，您将成为这方面的专家。 HTML 表格 HTML 代码定义了表格的结构。您使用 <table> 标记来定义表格。<tr>、<th> 和 <t
CSS3表格和表单样式
码说芯语的博客
10-31 4812
表格和表单样式
CSS实现的清爽、漂亮的表格样式分享
01-19
效果： 实现代码： 复制代码代码如下:<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” ...<head><... charset=gb2312″ />...CSS实现的清爽、漂亮的表格样式 – jb5t1.net</tit
仿Word自动套用格式使用CSS设置表格样式实例
12-03
通过这种方式，我们可以使用CSS精确地模拟Word中的表格样式，让网页中的表格同样具有丰富的视觉效果和专业感。这种技巧在构建复杂、美观的数据展示页面时非常有用，使得用户在网页中也能体验到与Word文档类似的功能...
HTML表格标记教程(48):CSS修饰表格
01-19
现在我们来看看怎样巧妙运用css语法美化表格。 注：除非特殊声明，本文所举各例插入的表格的cellspacing、cellpadding、...但是要制作一个非1×1的表格(如2×2)就稍微麻烦些，因为如果直接定义td样式border:1 solid
CSS表格样式1
05-27
由于描述中没有提供具体信息，我将根据常见的CSS表格样式实践进行详细讲解。 首先，我们来了解一下HTML表格的基本结构，由`<table>`、`<tr>`（行）、`<th>`（表头）和`<td>`（单元格）元素组成。CSS可以帮助我们...
CSS控制表格文字样式的研究
12-12
即使在DIV满天飞的今天，Table在网页的布局中还是少不了的，因为当需要输出数据时，Table布局远远比DIV布局有优势，而且同样的我们可以通过CSS来控制表格样式。要知道WEB标准并非是通篇的DIV CSS，而是倡导采用更...
CSS表格样式
xiangxiongfly
07-21 1万+
CSS表格样式 caption-side 标题位置 border-collapse 边框合并 border-spacing 边框间距 css样式（推荐使用）
CSS 表格：Table
梁辰兴的博客
09-19 2790
CSS折叠边框是一种用于实现边框缩小或扩张的CSS技巧，主要通过设置边框的宽度和高度，使边框在需要缩小或扩张时根据实际需要进行折叠。请注意，这只是一种模拟折叠边框的方法，实际的折叠边框效果可能需要使用其他技术或者配合其他属性来实现。如果单元格中的内容超出了单元格的宽度或高度，可以使用CSS的溢出处理方式来处理，例如使用。同时，在表格内部，单元格之间的边框是默认不显示的，如果需要显示，需要给单元格也设置。需要注意的是，对于表格的行高或单元格宽度，可以通过设置单元格的。CSS 表格属性可以用来改变表格的样式。
CSS-table样式+
weixin_47345929的博客
11-30 1493
table样式 table一般不用来布局，主要用来格式化数据。 属性： width:宽度 height:高度 border-collapse:collapse; 单线边框 border:边框线 td,tr属性： width:宽度 height:高度 text-align:文本水平方向对齐方式(left(默认)/center/right) vertical-align:文本垂直方向对齐方式(top/middle(默认)/bottom) 列表样式 不是描述性的文本的任何内容都可以认为是列表。比如：菜单、商品列
CSS 之 table 表格布局
weixin_45092437的博客
10-09 9207
除了使用HTML的table元素外，我们还可以通过display: table/inline-table;设置元素内部的布局类型为表格布局。并结合table-cell、table-row等相关CSS属性值可以实现HTML中table系列元素的效果，具有表头、表尾、行、单元格等概念，让元素以表格的形式进行布局。
【CSS】Table样式
weixin_33920401的博客
05-19 3678
一、table td的宽度详解 Table只有Table的宽度是可以设置的，并且各个浏览器理解一致 原则上应该将table的宽度设置成一个固定的值，而不应该设置成一个根据屏幕变化的值 Table的宽度为600px,Table的td所有宽度总和不到600px,浏览器会自动按照td的宽度的比例算出宽度 <table style="width: 600px;border-co...
Css之table布局:
SunPeng的博客
11-22 5979
Css之table布局:
css 中table简易样式
九幽神域——幽冥
12-08 953
因为一直做页面的表格样式所以将一些收集整理了一下 标题 标题 标题 标题 内容： 123 内容： 456 内容： 123 内容： 456 table tr{}//表格行样式 table tr:nth-child(odd){}//表格奇数行样式 table tr:nth-chil
CSS代码：好看的表格样式
05-25
以下是一个简单的CSS代码示例，可以实现一些漂亮的表格样式： ```css table { border-collapse: collapse; width: 100%; max-width: 800px; margin: 0 auto; font-size: 16px; font-weight: bold; text-...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值