用表格显示信息调理清楚,使浏览者一目了然。表格在网页中还有协助布局的作用,可以把文字、图像等组织到表格的不同行列。那么,接下来我将讲解一下表格的常用属性。

  首先,表格命令

  表格的行:tr  每行中的列:td
  表格的表头:<th></th>  默认加粗,单元格居中(居中、加粗)
  表格标题:caption
  跨列:colspan,当某个格跨n列时,其右边n-1个单元格需删除

跨行:rowspan,当某个格跨n行时,其下方n-1个单元格需删除(看每一行有几个上边线,有几条画几个)
   

<table>标签的常用属性

1、border:给表格添加边框,当border属性增大时,只有外围框线增加,单元格的边框始终为1px(一个像素)
2、cellspacing:单元格与单元格之间的间隙距离。当cellspacing="0",只会使单元格间隙为0,但不会合并边框线。【表格边框合并】style="border-collapse: collapse;",无需再写cellspacing="0"。
3、cellpadding:每个单元格中的内容,与边框线的距离。
4、weight/height:表格的宽高
5、align:表格在屏幕的左中右位置显示,left、center、right(给表格加上align,相当于让表格浮动,会直接打破表格后面元素的原有排列方式)
6、bgcolor:背景色    等同于style="background-color:;"
7、background:background="img/aaa.png"背景图片     等同于style="background-image:;",且背景图会覆盖背景色
8、bordercolor="blue"边框颜色
以上都可以用样式表代替
 

近者优先原则

  当表格属性与行列属性冲突时,以行列属性为准;
表格的align属性,是控制表格自身在浏览器的显示位置;行和列的align属性,是控制单元格中文字在单元格的对齐方式
表格的align属性,并不影响表格内,文字的水平对齐方式;tr和align属性,可以控制一行中所有单元格的水平对齐方式。
caption:表格标题

【tr和td相关的属性】

1、weight、height单元格的宽高
2、bgcolor:单元格的背景颜色
3、align:left center right 单元格中的文字,水平对齐方式
4、valign:top middle bottom单元格中的文字,垂直对齐方式
5、nowrap:nowrap="nowrap"单元格中文字不换行
 
 

练习

    接下来,我们制作一个简单的表格。

    代码:<table border="2" cellspacing="0" >
   <tr>
    <th>序号</th>
    <th>日期</th>
    <th>姓名</th>
    <th>时间</th>
    <th>身份证号</th>
    <th>单位</th>
    <th>来访事由</th>
    <th>记录人</th>
    <th>备注</th>
   </tr>
   <tr>
    
    <td style="text-align: center;">1</td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
   </tr>
   <tr>
    <td style="text-align: center;">2</td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
   </tr>
   <tr>
    <td style="text-align: center;">3</td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
   </tr>
   <tr>
    <td style="text-align: center;">4</td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
   </tr>
   <tr>
    <td style="text-align: center;">5</td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
   </tr>
   <tr>
    <td colspan="9" align="middle">经被访人核实,外来人员登记后方可入内。</td>
   </tr>
  </table>

上图制作中, 说几个比较容易出错的地方(其实是楼主打错的地方qwq)。

  1.行列弄混,表头出现在了第一列,呈现纵向排列。

  2.空格子显示不出来,这可能是没有打<td></td>。

  3.还有表格数字的居中设置,这个在td里设置,可以用样式style="text-align: center;"设置。

  4.最后就是表格的跨行与跨列,也就是colspan和rowspan,这个需要特别注意,不要错用,可以通过简单记col和row来实现。

  最后呢,这是本博主写的第一篇博客,写的比较丑陋,板式啊什么的都没有。当然了,随着博主的学习,这些在以后博客更新中会有所改善。大家需要转载的话,请注明本篇文章的链接。

html5-表格的建立的更多相关文章

  1. 扩展HT for Web之HTML5表格组件的Renderer和Editor

    在HT for Web提供了一下几种常用的Editor,分别是: slider:拉条 color picker:颜色选择器 enum:枚举类型 boolean:真假编辑器 string:普通的文本编辑 ...

  2. tkinter中表格的建立(十三)

    表格的建立 import tkinter from tkinter import ttk wuya = tkinter.Tk() wuya.title("wuya") wuya.g ...

  3. HTML5表格详细教程

    HTML5表格 文章目录 HTML5表格 5.1 定义表格 5.1.1 普通表格.列标题 5.1.2 表格标题 5.1.3 表格行分组.表格列分组 5.2 表格属性 5.2.1 单线表格.分离单元格 ...

  4. html5 表格标签 table tr td

      最重要的三个 <table>     表格声明标签 属性: boarder    边框粗细 style    可配合css 使用 <tr>    行标签 table row ...

  5. HTML5表格(table)篇

    初学HTML接触table少不了,但是实际应用的地方也有. 简单说明HTML <table> 标签 定义和用法 <table> 标签定义 HTML 表格. 简单的 HTML 表 ...

  6. Oracle表格建立

    Oracle学习第一天:学习了如何在网页上建立表空间,以及在关联性表格上建立表格,填充表格,学习了如何建立自己的表空间.效果如下:

  7. HTML5样式、链接和表格

    -------------------siwuxie095 HTML5 样式 1.标签 <style> 标签:样式定义 <link> 标签:资源引用 2.属性 rel:用于指定 ...

  8. 30个HTML5学习资源

    早在几个星期前,Adobe就发布了Dreamweaver CS5 HTML5 Pack的预览版下载.众所周知,HTML5在互联网领域掀起了一场大论战,并让Adobe的日子很难熬.HTML5致力于为前端 ...

  9. HTML5标签构成

    一个HTML5文件是由一些列的元素和标签组成的.元素是HTML5文件的重要组成部分,例如title(文件标题).img(图像)及table(表格)等.元素名不区分大小写,而HTML5用标签来规定元素的 ...

  10. [HTML5] FileReader对象

    写在前面 前一篇文章介绍了HTML5中的Blob对象(详情戳这里),从中了解到Blob对象只是二进制数据的容器,本身并不能操作二进制,故本篇将对其操作对象FileReader进行介绍. FileRea ...

随机推荐

  1. PHP 分支与循环

    一.概述: 上面一章我们讲解了PHP当中的运算符和表达式,通过上面的知识点我们就可以完成一些基本的运算操作了.但是涉及到一些比较复杂的逻辑,分支与循环就必不可少了.通过分支和循环的结合使用可以使业务更 ...

  2. 没有理由,就是要上一波C++的东西

    从入门开始,一直在用C , 对于C++可谓是一窍不通,只能是勉强看懂C++的代码,至于写更是连头文件什么iostream是什么我都不知道,更不用说什么using namespace std :之类的东 ...

  3. 【算法系列学习】线段树 区间修改,区间求和 [kuangbin带你飞]专题七 线段树 C - A Simple Problem with Integers

    https://vjudge.net/contest/66989#problem/C #include<iostream> #include<cstdio> #include& ...

  4. poj2502最短路!

    have just moved from a quiet Waterloo neighbourhood to a big, noisy city. Instead of getting to ride ...

  5. [js笔记整理]正则篇

    一.正则基本概念 1.一种规则.模式 2.强大的字符串匹配工具 3.在js中常与字符串函数配合使用 二.js正则写法 正则在js中以正则对象存在: (1)var re=new RegExp(正则表达式 ...

  6. WEB服务器如何选择 Apache or Nginx?

    Web服务器是直接影响网站性能的关键因素,也是每个站长选择网站运营环境时必然考虑的问题.目前Web服务器市场产品众多,最为主流和代表性的当属Apache.Nginx以及微软的IIS.本文目的是通过Ap ...

  7. zoj1654 Place the Robots 二分图最大匹配

    题目链接:http://acm.zju.edu.cn/onlinejudge/showProblem.do?problemId=654 将每一行的包含空地的区域编号 再将每一列的包含空地的区域编号 然 ...

  8. hdu4639 hehe 递推

    此题为递推题 现场比赛中由于心态问题没能快速推出来定义f[i]为i个连续的he可以表示的语意的个数 则如果第i个he单独考虑f[i]=f[i-1];如果将第i个he和第i-1个he组合 则其只能表示为 ...

  9. 转:Redis 配置为 Service 系统服务

    在Linux中,将程序配置为服务后,就可以使用service命令对系统服务进行管理,如:start(启动).stop(停止).restart(重启)等.Redis安装后默认不会配置为系统服务,本文将介 ...

  10. 跟随上次的socket sever,追加Tcplistener、Httplistener的server

    一.Tcplistener搭建web server 1.同socket类似,Tcplistener其实是对socket的封装,方便编程,先初始化tcplistener并且开始监听 //初始化端点信息 ...