用CSS怎么把表格显示出来

html-css07

用CSS怎么把表格显示出来,第1张

CSS中显示和隐藏有多种方法，比较常见的是有display:none|blockvisibility: hidden|visible他们的区别在于，对文档流影响的区别。一般大家显示隐藏元素，比较倾向于用display。

你如果想隐藏表格，可以用table{display:none}来操作。想显示的话把display:block即可。

在网页中用css+div实现表格效果，首先我们需要理解的就是div是一个块级元素，可以在里面包裹其他的div，通过给这些div这是不同的高度，宽度，还有一些float属性，就可以实现如同表格一样的布局，具体看代码来理解下:

<!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/htmlcharset=utf-8" />

<link rel="stylesheet" type="text/css" href="CSS-kuaidu.css"/>

<title>宽度的学习</title>

</head>

<body>

<div style="width:960pxheight:700pxmargin:0 autoborder:solid 1px #999999" >

<div style="width:960pxheight:25pxborder:solid 1px #CCCCCC">

导航条

</div>

<div style="width:960pxheight:80pxborder:solid 1px #CCCCCC">

店铺图片

</div>

<div style="width:200pxheight:400pxborder:solid 1px #CCCCCCfloat:left">

左侧目录

</div>

<div style="width:750pxheight:400pxborder:solid 1px #CCCCCCfloat:right">

右侧内容

</div>

<div style="width:960pxheight:17pxborder:solid 1px #CCCCCCfloat:left">

尾区

</div>

<div style="width:960pxheight:173px border:solid 1px #CCCCCCfloat:left">

尾招

</div>

</div>

</body>

</html>

设计思路可以这样子，你首先隐藏这个DIV层，然后写一个JS改变这个层属性，让它显示出来并锁定浏览器。

语法：

display : block | none | inline | compact | marker | inline-table | list-item | run-in | table |table-caption | table-cell | table-column | table-column-group | table-footer-group | table-header-group | table-row |table-row-group

参数：

block : 　CSS1　块对象的默认值。用该值为对象之后添加新行

none : 　CSS1　隐藏对象。与visibility属性的hidden值不同，其不为被隐藏的对象保留其物理空间

inline : 　CSS1　内联对象的默认值。用该值将从对象中删除行

compact : 　CSS2　分配对象为块对象或基于内容之上的内联对象

marker : 　CSS2　指定内容在容器对象之前或之后。要使用此参数，对象必须和:after及:before 伪元素一起使用

inline-table : 　CSS2　将表格显示为无前后换行的内联对象或内联容器

list-item : 　CSS1　将块对象指定为列表项目。并可以添加可选项目标志

run-in : 　CSS2　分配对象为块对象或基于内容之上的内联对象

table : 　CSS2　将对象作为块元素级的表格显示

table-caption : 　CSS2　将对象作为表格标题显示

table-cell : 　CSS2　将对象作为表格单元格显示

table-column : 　CSS2　将对象作为表格列显示

table-column-group : 　CSS2　将对象作为表格列组显示

table-header-group : 　CSS2　将对象作为表格标题组显示

table-footer-group : 　CSS2　将对象作为表格脚注组显示

table-row : 　CSS2　将对象作为表格行显示

table-row-group : 　CSS2　将对象作为表格行组显示

说明：

设置或检索对象是否及如何显示。

目前 IE5.5仅支持以上CSS1的参数。

对应的脚本特性为display。请参阅我编写的其他书目。

示例：

img { disply: blockfloat:right}