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>

 

posted @ 2021-11-20 18:24  嘉琦  阅读(167)  评论(0)    收藏  举报