table标签

table的基本样式:

https://blog.csdn.net/lilongsy/article/details/77606662

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

</head>

<body>

<table width="95%" border="1" cellpadding="2" cellspacing="1" style="table-layout:fixed;">
<!=-- width="95%":设置占屏幕的百分比 style="table-layout:fixed;":半角符连续字符会自动换行,注意设置了这个属性tr和td就不要轻易加height属性否则会无法生效 -->
  <tr>

    <td width="50px" nowrap>序号</td>

    <td width="150px" nowrap>分类A</td>

    <td width="150px" nowrap>分类B</td>

    <td width="200px" nowrap>名称</td>

    <td align="left" width="150px" style="word-wrap:break-word;">说明fdsaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</td>
　　<!-- style="word-rap:break-word;":如果td设置了宽度,半角符连续字符会自动换行,否则要在table加style="table-layout:fixed;" -->
    <td width="100px" nowrap>操作</td>

  </tr>

  ……

</table>

</table>

</body>

</html>

table表格的美化:

https://yq.aliyun.com/articles/573432

<!DOCTYPE html>

<html>

<head>

<meta charset=" utf-8">

<meta name="author" content="http://www.softwhy.com/" />

<title>蚂蚁部落</title>

<!-- font-size:12px; 字体设置为12px -->

 <!-- tableLayout 属性用来显示表格单元格、行、列的算法规则。 fixed列宽由表格宽度和列宽度设定 automatic 默认,列宽度由单元格内容设定。 inherit 规定应该从父元素继承 table-layout 属性的值。-->

 <!-- border-collapse: collapse; 为表格设置合并边框模型,设置后就就没有多重边框,可以达到excel的边框效果-->

<style type="text/css">

body, table{font-size:12px;}

table{

  table-layout:fixed;

  empty-cells:show;

  border-collapse:collapse;

  margin:0 auto;

}

td{height:30px;}

h1, h2, h3{

  font-size:12px;

  margin:0;

  padding:0;

}

.table{

  border:1px solid #cad9ea;

  color:#666;

}

.table th{

  background-repeat:repeat-x;

  height:30px;

}

.table td, .table th{

  border:1px solid #cad9ea;

  padding:0 1em 0;

}

.table tr.alter{

  background-color:#f5fafe;

}

</style>

</head>

<body>

<table width="90%" class="table">

  <tr>

    <th>学号</th>

    <th>姓名</th>

  </tr>

  <tr>

    <td>1</td>

    <td>1</td>

  </tr>

  <tr class="alter">

    <td>2</td>

    <td>2</td>

  </tr>

</table>

</body>

</html>

table表格行合并和列合并

  • colspan是“column span（跨列）”的缩写。colspan属性用在td标签中，用来指定单元格横向跨越的列数：
  • rowspan的作用是指定单元格纵向跨越的行数。
  • 使用实例 
    <tr>
    
            <th colspan="3" align="center">InputStream类型</th>
    
          </tr>
    
          <tr>
    
            <th rowspan="2">类</th>
    
            <th rowspan="2">功 能</th>
    
            <th>构造器参数</th>
    InputStream的类型
    类 功能 构造器参数
    如何使用 
     

html table标签的更多相关文章

  1. python处理html的table标签

    转载:http://www.xuebuyuan.com/583071.html python处理html的table标签 2012年01月06日 ⁄ 综合 ⁄ 共 5279字 ⁄ 字号 小 中 大 ⁄ ...

  2. ol,ul,dl,table标签的基本语法

    ol,ul,dl,table标签的基本语法 有序列表: 无序列表:                                  自定义列表: <ol> <ul> < ...

  3. HTML——表格table标签，tr或者td

    表格定义和用法 <tr> 标签定义 HTML 表格中的行. tr 元素包含一个或多个 th 或 td 元素. HTML 与 XHTML 之间的差异 在 HTML 4.01 中,tr 元素的 ...

  4. table标签

    table标签使我们最常用的的标签,在使用table标签时我们要注意一些其属性,早期我们经常使用table标签对其进行页面布局但是现在我们基本不再使用,由此可见table标签也是非常强大的一个工具. ...

  5. dl标签和table标签

    dl标签定义了一个定义列表 <html> <body> <h2>一个定义列表:</h2> <dl>   <dt>计算机</ ...

  6. PHP自学4——通过函数将数组数据输出到html的Table标签中（使用函数的例子）

    这一节其实说实话并没有什么干货,不过为了防止PO主的懒癌的复发,还是坚持放一点东西,即使是内容和长度都令人发指.这一节通过一个函数来实现将数组中的内容输出html的Table标签当中显示. 函数文件— ...

  7. PHP自学3——在html的<table>标签中显示用户提交表单

    为了更好地显示用户提交表单,本节将在上一节的基础上将读取的用户表单显示在html的<table>标签中,这一节将用到和数组有关的知识. 本节代码将从外部文件(.txt文件)中读取信息于指定 ...

  8. display：table标签来自动改变列宽 改变的同时table的整体宽度跟随变化

    发现公司里的所有分页功能都是通过display:talbe来实现的,但是用户最近说要让表格列宽可以拖动:所有我就寻找了好多的办法:网上找了很多的资料,但是都不是我要的效果因为他们都是列宽不改变要不就是 ...

  9. 区别CSS中display：box；inline；none以及HTML中 <frame> 标签<table> 标签的 frame 属性

    区别display:box:display:inline:display:none三者的不同 display:block的特点是: block是Display默认的值.总是在新行上开始:该对象随后的内 ...

  10. <table>标签总结（colspan跨列 ，rowspan跨行）

    table标签有些内置属性要设置: <table cellpadding="0" cellspacing="0" border="0" ...

随机推荐

  1. 批处理 ------ @、ECHO OFF、ECHO ON 的使用

    1.在批处理文件中,如果命令前加@,表示这条命令不打印出来,只把结果打印出来,即@是关闭命令本身的回显 2.::在批处理中表示注释某一行 3.ECHO ON表示接下来的命令中(不包括本命令),执行命令 ...

  2. mac 本上对 rar 压缩包解压

    以前从晚上各种找软件对 xxx.rar 压缩包文件进行解压,也确实找到过那么几个,要不是不好用就是解压完有乱码,很是头疼. 这次又遇到这样的问题,于是下定决心将这个问题彻底解决好,经过验证,总结一下最 ...

  3. 自己的Promise

    废话不多说,直接上代码: class Promise2{ constructor(fn){ const _this=this; //重点 this.__queue=[]; this.__succ_re ...

  4. scatter

    一.matplotlib.pyplot.scatter用来画散点图 import matplotlib.pyplot as plt import matplotlib as mpl mpl.rcPar ...

  5. 虚拟机下安装ubuntu后root密码登录失败的问题

    问题描述: 在虚拟机下安装了ubuntu中要输入用户名,一般情况下大家都会输入一个自己的网名或绰号之类的,密码也在这时设置过了. 但是当安装成功之后,使用命令#su root,然后输入刚才设置的密码, ...

  6. Python3.X爬虫

    1.Python很有名,但是一直没在实际项目中用过,今天花30分钟学习下.去Python官网https://www.python.org/downloads/ 2.2.X与3.X版本相差比较大,新手用 ...

  7. 一、linux IO 编程---内存管理

    1.1 进程在虚拟空间中的布局 32位的操作系统虚拟空间的大小为 4GB,即每个进程在系统中分配的虚拟空间大小为4GB.这4GB的大小被分为了两个部分: 内核空间:1GB,内核起的进程 用户空间:3G ...

  8. 嵌入式iframe子页面与父页面js通信方式

    iframe框架中的页面与主页面之间的通信方式根据iframe中src属性是同域链接还是跨域链接,有明显不同的通信方式,同域下的数据交换和DOM元素互访就简单的多了,而跨域的则需要一些巧妙的方式来实现 ...

  9. python cookbook 笔记一

    因为有些代码只有在python3里可以正常运行,所以最好配两个虚拟环境 安装虚拟环境: pip install virtualenv virtualenv -p /usr/bin/python3.5 ...

  10. Eclipse中项目不会自动编译问题的坑和注意点

    最近接受了几个又小有老的项目,用eclipse反而比idea方便,但是好长时间不用eclipse了,还有有些问题的! 主要是碰到了classnotfound这个难缠的问题:这里记录一下几个坑,避免以后 ...