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>
css设置文字垂直居中
<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>

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。