CSS控制Table表格文字样式
发布时间：2008-06-11 18:53:00
现在使用CSS网页布局，摒弃了传统Table表格布局的模式，但是Table表格在网页中还是少不了的，因为当需要输出表格类数据时，就应该使用表格，而不是div或其他标签，而且我们可以通过CSS来控制表格样式。要知道WEB标准并非是通篇的DIV+CSS，而是倡导采用更合理的语义标签来进行布局。
在网页中文字的对齐方式一直是排版的重中之重，特别是对于数据显示来说，如何才能让众多的数据的可读性更强可识别性更高呢？
asp之家的其它css表格的文章：css设计的具有亲和力的表格 用css实现柱状图（Bar Graph）的方法（二）—基于表格元素的柱状图
先来看表格一的文字对齐，这无疑是最失败的对齐方式。表格标题<th />标签内容默认是居中对齐的，可是当把<td />标签的内容也设为居中对齐时，无疑给数据的可读性带来了很大的困扰。因为每当从上一行数据看到下一行数据时我们的视线不得不转动来扫遍整个表格，增加了阅读的负担与时间；
这种对齐方式是Table完全默认的，<th />标签内容居中对齐，<td />标签内容左对齐，似乎也完全合情合理，可是如下图中所示，当其中一条数据很长但其它数据都很短时，这样子的易识别性依然不高。当其中某一条数据很长时，表格标题将离数据短的那个内容很远，同样也是增加了阅读的负担与时间；
通过手工加入样式，把<th />标签的对齐方式改为左对齐，与<td />标签的默认对齐方式一样，整个表格看上去整齐一致，可读性与可识别性都得到了提高。
<th />标签里的内容与注册表单或是留言表单里的说明文字是一样的用途，起的是说明或是归类的作用。这也就是为什么在很多的注册表单还有留言表单里用的都是这种对齐方式。
试想一下，如果下面这个留言表单里的说明文字都居中对齐，那会是个什么样子？
注意：表单的布局可以使用lable或其他标签，而不是用表格来进行组织，这只是一种过渡的方法！
0
投稿猜你喜欢
一、前言何谓动态导入模块，就是说模块的导入可以根据我们的需求动态的去导入，不是像一般的在代码文件开头固定的导入所需的模块。何谓反射机制，利用- 直接上图，图文并茂，相信你很快就知道要干什么。A文件：B文件：可以发现，A文件中“汉字井号”这一列和B文件中“WELL”这一列的属性相同，以
- 作为一个非设计出生的研究思路偏向的设计师，带着少了设计师自恋和自怜的眼光，我记下最近一年来感受到的交互设计师的尴尬。交互设计师就是出界面的，
- 前言： 首先刚开始知道要书写一个这样的功能我的内心是比较崩溃的 完全没有思路， 然后就打开官网的文档进行观
- python一行输入n个数据有时会碰到一行输入多个数据，这是可以先用str类型存一组数据，然后再迭代的将每个数据追加到新的列表中。方法一先输
- 用FrontPage做网页的朋友们，你的主要页面中，可能都带有许多相同的元素吧？如页头横向排列(或左侧纵向排列)的主要链接按钮、页底的板权说
- 这也许是学习一门语言时大家都会问的一个问题，其实我个人认为无所谓哪个最好，关键在于哪个用着顺手，方便。还有很多人乐于去做排名，去看排名，哪个
- 需要selenium控制的chrome向下滑动，自动加载一些内容，核心代码是：browser.execute_script("wi
- 接上一篇内容：https://www.jb51.net/article/249934.htm一、聚簇索引其实之前内容中介绍的 B+ 树就是聚
- 1、先看看什么是 iterable 对象以内置的max函数为例子，查看其doc：>>> print max.__doc__
- 在页面层次结构，数据较多的时候，用v-if或者v-show就会出现div闪现，或者部分闪烁的结果。可以在根元素添加v-cloak来解决，并且
- 首先是安装cmake环境。因为博主测试机是ubuntu，所以直接用apt-get install cmake命令来安装，yum相信应该也一样
- 访问数组元素数组索引等同于访问数组元素。可以通过引用其索引号来访问数组元素。NumPy 数组中的索引以 0 开头，这意味着第一个元素的索引为
- WebDriver有2个方法执行Java Script脚本。（1）同步执行：execute_script（2）异步执行：execute_as
- 模版基本介绍模板是一个文本，用于分离文档的表现形式和内容。 模板定义了占位符以及各种用于规范文档该如何显示的各部分基本逻辑（模板标签）。 模
- 前言一段时间没有用Union和Union，再用的时候忘了怎么用了。。。所以做一篇文章来记录自己学Union和Union的经历。提前准备在Sq
- 在go语言中，byte其实是uint8的别名，byte 和 uint8 之间可以直接进行互转。目前来只能将0~255范围的int转成byte
- 之前也写过这个小组件，最近遇到select下加搜索的功能，所以稍微完善一下。效果图：子组件 dropdown.vue<template
- SELECT SUBSTR (T.RPT_ID, &nb
- 环境配置gradio 安装 pip install gradiocv2 安装 pip install python-opencv实验原理cv
