全网云cms网站管理系统

CSS样式中表格标记table的基本用法

来源:全网云cms网站管理系统 日期:2017-11-25 11:32:15 属于:前端开发
在网页里面经常会有同类属性的数据展示,需要用到表格,通常有几个主要设置项目,比如:标题、单元格,效果通过css的属性值来控制即可,元素主要有:
table,表格
caption,表格总标题
th,表格内部的行列标题,也就是tale head的缩写,使用时自动加粗
tr,表格的一行,table row的缩写
td,一个单元格,table division的缩写
下面还是通过具体的案例来演示,完整测试代码如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
</head>
 
<body>
<table width="500" border="1">
  <caption>
    SEOWHY DEMO 表格CSS演示
  </caption>
  <tr bgcolor="#3399CC">
    <th bgcolor="#FFFF99" scope="col">姓名</th>
    <th bgcolor="#FFFF99" scope="col">年龄</th>
    <th bgcolor="#FFFF99" scope="col">班级</th>
    <th bgcolor="#FFFF99" scope="col">专业</th>
  </tr>
  <tr>
    <th scope="row">张三</th>
    <td align="center">18</td>
    <td align="center">1</td>
    <td align="center">计算机</td>
  </tr>
  <tr>
    <th scope="row">李四</th>
    <td align="center">19</td>
    <td align="center">2</td>
    <td align="center">英语</td>
  </tr>
  <tr>
    <th scope="row">王五</th>
    <td align="center">20</td>
    <td align="center">3</td>
    <td align="center">电子商务</td>
  </tr>
</table>
</body>
</html>
  
这是很简单的一个表格,行标题加了背景颜色,列标题没有加,行标题th除了加背景颜色,还有一个属性scope="col",这表示列表头,也就是column的缩写。下面单元格里面的数据是以此为表头填充的。同理,列标题下面的th也有一个属性scope="row",表示他们是行表头,右侧单元格里面的数据是以此为表头填充的。另外,在单元格里面还有一个属性align="center"就比较简单了,让内容居中显示。从效果里面,我们可以看到,表格是双边框的,这是因为table和td单元格是自带边框,所以看上去有两条边,如果要显示一条边,在table里面加入一个样式即可style="border-collapse:collapse;"
  
  
再看效果,边框就合并为一条了,也就是我们日常看的比较多的表格的样式。

上一前端开发:没有了

下一前端开发:CSS样式中表格内容隔行变色效果设置

相关前端开发
    暂无信息