知识点普及：

表格是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. java职业路线图

  2. linux基础-TCP/IP协议篇

    一.网络TCP/IP层次模型 1.网络层次模型概念介绍:TCP/IP协议就是用于简化OSI层次,以及相关的标准.传输控制协议(tcp/ip)族是相关国防部(DoD)所创建的,主要用来确保数据的完整性及 ...

  3. Redis - 2 - 聊聊Redis的RDB和AOF持久化 - 更新完毕

    1.RDB 1.1).RDB是什么? RDB,全称Redis Database RDB是Redis进行持久化的一种方式,当然:Redis默认的持久化方式也是RDB 1.2).Redis配置RDB 1. ...

  4. Mybatis-plus报Invalid bound statement (not found)错误

    错误信息 org.springframework.security.authentication.InternalAuthenticationServiceException: Invalid bou ...

  5. [BUUCTF]PWN——others_babystack

    others_babystack 附件 步骤: 例行检查,64位程序,开了挺多保护 本地试运行一下程序 64位ida载入,看main函数 1是read函数,存在栈溢出:2是puts函数,3退出 利用思 ...

  6. BIT 常态化在线CTF系统 pwn题目

    偶然得到这个平台,发现是BIT的CTF平台,应该是平时的阶段性的训练题目.看了看题,其他方向的题目感觉都是入门题,但是pwn题目,发现还是比入门题难一点点的,来记录一下. pwn1 栈上任意位置的读写 ...

  7. ciscn_2019_s_3 一道收获很多的题（进步大只能说明基础差）

    32位与64位 系统调用的区别: 1. 传参方式不同 2. 系统调用号 不同 3. 调用方式 不同 32位: 传参方式:首先将系统调用号 传入 eax,然后将参数 从左到右 依次存入 ebx,ecx, ...

  8. CF336A Vasily the Bear and Triangle 题解

    Content 一个矩形的顶点为 \((0,0)\),其对顶点为 \((x,y)\),现过 \((x,y)\) 作直线,分别交 \(x\) 轴和 \(y\) 轴于 \(A,B\) 两点,使得 \(\t ...

  9. LuoguB2044 有一门课不及格的学生 题解

    Content 给出一名学生的语数英三门成绩,请判断该名学生是否恰好有一门不及格(成绩小于 \(60\) 分). 数据范围:成绩在 \(0\sim 100\) 之间. Solution 强烈建议先去做 ...

  10. django的Cookie Session

    Cookie 初识cookie的设置和获取 示例 from django.shortcuts import render, redirect from django.shortcuts import ...