CSS 表格基本使用 案例
知识点普及：
表格是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 表格基本使用 案例的更多相关文章
- HTML学习笔记 CSS表格及轮廓案例 第八节 （原创）参考使用表
#tb, tb1, tr, th, td { border: 5px solid blue; /*加边框*/ padding: 5px; /*内边距*/ } #tb1 { border-collaps ...
- 第 18 章 CSS 表格与列表
学习要点: 1.表格样式 2.列表样式 3.其他功能 主讲教师:李炎恢 本章主要探讨 HTML5 中 CSS 表格和列表,通过表格和列表的样式设置,让表格和列表显示更加多元化. 一．表格样式 表格有五 ...
- HTML 学习笔记 CSS(表格)
CSS 表格属性可以帮助您极大的改善表格的外观 表格边框 如需在CSS中设置表格的边框 请使用border属性. 在下面的例子中table th 以及td设置了蓝色边框. table, th, td ...
- Bootstrap css栅格 + 网页中插入代码+css表格
设计达人 http://www.shejidaren.com/30-minimal-app-icons.html CSS栅格: <!DOCTYPE html> <html lang= ...
- 第七十五节，CSS表格与列表
CSS表格与列表 学习要点: 1.表格样式 2.列表样式 3.其他功能 一．表格样式 表格有五种独有样式,样式表如下: 属性 值 ...
- CSS 表格实例
CSS 表格实例CSS 表格属性可以帮助您极大地改善表格的外观.CSS Table 属性属性 描述border-collapse 设置是否把表格边框合并为单一的边框.border-spacing 设置 ...
- CSS表格(未完成)
CSS 表格 使用 CSS 可以使 HTML 表格更美观. 表格边框 指定CSS表格边框,使用border属性. 下面的例子指定了一个表格的Th和TD元素的黑色边框:
- 【使用DIV+CSS重写网站首页案例】步骤分析与代码实现
使用DIV+CSS重写网站首页案例 步骤分析: 第一步:先定义一个大的 div(整个页面),然后嵌套 8 个小的 div(共八行): 第二步:(第一行)在第一个 div 里面嵌套 3 个小的 div: ...
- CSS：CSS 表格
ylbtech-CSS:CSS 表格 1.返回顶部 1. CSS 表格 使用 CSS 可以使 HTML 表格更美观. Company Contact Country Alfreds Futterkis ...
随机推荐
- jquery对radio和checkbox的操作
jQuery获取Radio选择的Value值 代码 $("input[name='radio_name'][checked]").val(); //选择被选中Radio的Valu ...
- AOP中环绕通知的书写和配置
package com.hope.utils;import org.aspectj.lang.ProceedingJoinPoint;import org.aspectj.lang.annotatio ...
- JavaEE复习二
Servlet应用开发接口: javax.servlet.Servlet: init()方法:调用在构造方法之后,在service方法之前: service()方法:调用此方法允许Servlet响应请 ...
- input type="file"多图片上传
单个的input type="file"表单也是可以实现多图片上传的 代码如下: <form action="manypic.php" method=&q ...
- HDD深圳站：全生命周期赋能开发者，华为引领应用生态升级
12月14日,由华为开发者联盟主办的HDD(HUAWEI Developer Day)于深圳举行.此次HDD主论坛,围绕打造应用全生命周期服务,介绍了华为在创新孵化.开发测试.应用分发和运营增长阶段的 ...
- ASP.NET WebApi 依赖 SAP Connector dll 报错
说明 本地 VS 开发 ASP.NET WebApi 调试运行没有问题,但发布到服务器 IIS 上就报错.结果发现是 SAP 依赖库的问题:sapnco.dll.sapnco_utils.dll. 错 ...
- 使用.NET 6开发TodoList应用(1)——系列背景
前言 想到要写这样一个系列博客,初衷有两个:一是希望通过一个实践项目,将.NET 6 WebAPI开发的基础知识串联起来,帮助那些想要入门.NET 6服务端开发的朋友们快速上手,对使用.NET 6开发 ...
- 动手做个 AI 机器人，帮我回消息！
大家好,我是鱼皮,自从做了知识分享,我的微信就没消停过,平均每天会收到几百个消息,大部分都是学编程的朋友向我咨询编程问题. 但毕竟我只有一个人,没法所有消息都一个个回复,所以也是很愧疚和无力吧:另外我 ...
- Java 数据类型：集合接口Map：HashTable；HashMap；IdentityHashMap；LinkedHashMap；Properties类读取配置文件；SortedMap接口和TreeMap实现类：【线程安全的ConcurrentHashMap】
Map集合java.util.Map Map用于保存具有映射关系的数据,因此Map集合里保存着两个值,一个是用于保存Map里的key,另外一组值用于保存Map里的value.key和value都可以是 ...
- ajax 有终止请求 abort 那 axios 有没有，怎么实现
见代码 class View extends Component { constructor(props){ super(props); this.state = { cancel:null, can ...