知识点普及：

表格是html中经常使用到的，简单的使用可能很多人都没问题，但是更深入的了解的人恐怕不多，下面我们先来看一下如何使用。

<table>是<tr>的上层标签

<tr>必须在一个<table></table>里面,它不能单独使用,相当于<table>的属性标签.

<table>标示一个表格,<tr>标示这个表格中间的一个行

<td>标示行中的一个列,需要嵌套在<tr></tr>中间

具体格式是:(两行两列)

<table>

<tr>

<td></td>

<td></td>

</tr>

</teble>

<th>和<td>一样,也是需要嵌套在<tr>当中的,<tr>嵌套在<table>当中

<table>...</table> 用于定义一个表格开始和结束

<th>...</th> 定义表头单元格。表格中的文字将以粗体显示（<TH>与<TD>同样是标示一个储存格,唯一不同的是<TH>所标示的储存格中的文字是以粗体出现,即可以这样看：

<th>文字</th>=<td><b>文字</b></td>

），

在表格中也可以不用此标签，<th>标签必须放在<tr>标签内

<tr>...</tr> 定义一行标签，一组行标签内可以建立多组由<td>或<th>标签所定义的单元格

<td>...</td> 定义单元格标签，一组<td>标签将将建立一个单元格，<td>标签必须放在<tr>标签内

。<th>为表格标题，属性summar为摘要，<caption>标签为首部说明，<thead>标签为表格头部，<tbody>标签为表格主体内容，<tfoot>标签为表格尾部。

其中还可以使用scope 可用于取代headers属性，标记含有表头信息的单元格，其中各数值的内容如下：

　row 指示当前单元格，为包含当前单元格的行提供相关的表头信息。

　col 指示当前单元格，为根据当前单元格指定的列提供相应的表头信息。

　rowgroup 指示当前单元格，为包含当前单元格的其余行组提供相关的表头信息。

　colgroup 指示当前单元格，为根据当前单元格指定的其余列组提供相应的表头信息。

abbr 用于定义表头单元格中的缩写名，如果没有定义该属性，则将默认单元格内容为节略形式。
案例： 注意区分《tr是行，td是列》
<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>test</title>

<style>

table {

    border-collapse: collapse;/*属性设置表格的边框是否被折叠成一个单一的边框或隔开：   加上它跟真正的表格无异  去掉，则是标准显示*/

    width:100%;        /*宽度占浏览器的100%*/

}

table, td, th {

    padding: 10; /*如需控制边框和表格内容之间的间距，应使用td和th元素的填充属性*/

    border: 1px solid black; /*表示1像素的黑色黑线边框*/

    text-align:right;      /*针对文字，水平方向的右靠齐，可以改为left左，center中间*/

    height:50px;           /*行高*/

    vertical-align:bottom; /*针对文字，默认显示垂直方向的居中，可以更改为top顶部，bottom底部*/

    background-color:green; /*背景颜色*/

    color:white;           /*文字颜色*/

}

</style>

</head>

<body>

<table>

  <tr>

    <th>Firstname</th>

    <th>Lastname</th>

  </tr>

  <tr>

    <td>Peter</td>

    <td>Griffin</td>

  </tr>

  <tr>

    <td>Lois</td>

    <td>Griffin</td>

  </tr>

</table>

<p><b>注意：</b> 如果没有指定 !DOCTYPE  border-collapse 属性在 IE8 及更早 IE 版本中是不起作用的。</p>

</body>

</html>

CSS 表格基本使用 案例的更多相关文章

  1. HTML学习笔记 CSS表格及轮廓案例 第八节 （原创）参考使用表

    #tb, tb1, tr, th, td { border: 5px solid blue; /*加边框*/ padding: 5px; /*内边距*/ } #tb1 { border-collaps ...

  2. 第 18 章 CSS 表格与列表

    学习要点: 1.表格样式 2.列表样式 3.其他功能 主讲教师:李炎恢 本章主要探讨 HTML5 中 CSS 表格和列表,通过表格和列表的样式设置,让表格和列表显示更加多元化. 一．表格样式 表格有五 ...

  3. HTML 学习笔记 CSS(表格)

    CSS 表格属性可以帮助您极大的改善表格的外观 表格边框 如需在CSS中设置表格的边框 请使用border属性. 在下面的例子中table th 以及td设置了蓝色边框. table, th, td ...

  4. Bootstrap css栅格 + 网页中插入代码+css表格

    设计达人 http://www.shejidaren.com/30-minimal-app-icons.html CSS栅格: <!DOCTYPE html> <html lang= ...

  5. 第七十五节，CSS表格与列表

    CSS表格与列表 学习要点: 1.表格样式 2.列表样式 3.其他功能 一．表格样式 表格有五种独有样式,样式表如下:             属性               值           ...

  6. CSS 表格实例

    CSS 表格实例CSS 表格属性可以帮助您极大地改善表格的外观.CSS Table 属性属性 描述border-collapse 设置是否把表格边框合并为单一的边框.border-spacing 设置 ...

  7. CSS表格(未完成)

    CSS 表格 使用 CSS 可以使 HTML 表格更美观. 表格边框 指定CSS表格边框,使用border属性. 下面的例子指定了一个表格的Th和TD元素的黑色边框:

  8. 【使用DIV+CSS重写网站首页案例】步骤分析与代码实现

    使用DIV+CSS重写网站首页案例 步骤分析: 第一步:先定义一个大的 div(整个页面),然后嵌套 8 个小的 div(共八行): 第二步:(第一行)在第一个 div 里面嵌套 3 个小的 div: ...

  9. CSS：CSS 表格

    ylbtech-CSS:CSS 表格 1.返回顶部 1. CSS 表格 使用 CSS 可以使 HTML 表格更美观. Company Contact Country Alfreds Futterkis ...

随机推荐

  1. 编译安装nginx 1.16

    准备源码包,并解压,创建nginx用户 [root@slave-master ~]# tar xf nginx-1.16.0.tar.gz [root@slave-master ~]# useradd ...

  2. SQL 父子表，显示表中每条记录所在层级

    1.sqlserer 中有一张父子关系表,表结构如下: CREATE TABLE [dbo].[testparent]( [ID] [int] IDENTITY(1,1) NOT NULL, [nam ...

  3. ANTLR 相关术语

    下面介绍很多重要的与语言识别相关的术语. 语言(Language) A language is a set of valid sentences 一门语言是一个有效语句的集合. Sentences a ...

  4. 使用matplotlib中的bar函数绘制柱状图

    使用柱状图显示三日电影的票房信息 要显示的数据为2018年12月7日-9日四场电影的票房信息 四场电影分别为:无名之辈,狗十三,毒液:知名守卫者,憨豆特工3 2018年12月7日四场电影票房分别为:[ ...

  5. CF469A I Wanna Be the Guy 题解

    Content 小 A 和小 B 正在玩一个游戏,游戏一共有 \(n\) 关,而两个人各只能通过 \(p_A,p_B\) 个关卡.问他们能否通过合作通关这个游戏. 数据范围:\(1\leqslant ...

  6. java 图形化小工具Abstract Window Toolit ImageIO缩放图片，添加水印

    实现步骤: 读取图像Image src = ImageIO.read 创建目标图像BufferedImage distImage = new BufferedImage(dstWidth, dstHe ...

  7. java 多线程: Thread 并发访问-代码块同步synchronized {}；String作为被锁的对象

    方法同步的弊端 方法同步的时候,如果一个方法需要线程安全控制的代码速度其实很快,但是还有其他的业务逻辑代码耗时非常长(比如网络请求),这样所有的线程就在这一块就等待着了,这样造成了极大的资源浪费如果并 ...

  8. 几个主流TCP/IP协议栈介绍

    我们知道TCP IP协议栈内包括了诸多协议.那么对于这当中的协议的功能以及作用,我们来具体了解一下吧.现在让我们做一个盘点,帮助大家总结一下,还望对大家能够有所帮助. 1.BSD TCP IP协议栈 ...

  9. Shell bash和sh区别

    Shell 中文意思贝壳,寓意类似内核的壳.Shell是指一种应用程序,这个应用程序提供了一个界面,用户通过这个界面访问操作系统内核的服务.Shell 是一个用 C 语言编写的程序,它是用户使用 Li ...

  10. 10分钟快速上车短视频风口：基于uniapp框架创建自己的仿抖音短视APP

    在今年也就是第48次发布的<中国互联网络发展状况统计报告>有这样一个数据,21年的上半年以来,我国我国网民规模达10.11亿,其中短视频用户达8.88亿.碎片化的生活场景下,短视频成为人们 ...