Html如何创建好看的table 表格？

Html如何创建好看的table 表格？简单几步，让你轻松解决。

操作方法

  • 01

    1. 参考经验如下创建一个html文件。HBuilder X如何创建html文件？启动运行教程

  • 02

    2.  在body块中，下入下图所示的代码，预览表格的样式如图所示

  • 03

    3.  在项目空白处右键，弹出的新建下拉菜单中找到cs文件，创建.css文件

  • 04

    4.  打开.css文件，如图所示，输入代码并保存如下（和步骤1在同一路径下）： h1{background-color:blue;border-width: thick;} .GreenDiv{background-color:Green;} /** 更改每行的颜色**/ /**table.tr{background-color:blue;}**/ table tr:nth-child(odd){background: #ccc;} /*修改表格的样式*/ table{width: 90%;background: #ccc;margin: 10px;border-collapse: collapse;} /**th,td{height: 25px;line-height: 25px;text-align: center;border: 1px solid #ccc;}**/ th, td {height:25px;line-height:25px;text-align:center;border:1px solid #ccc;} th{background: #eee;font-weight: normal;} tr{background: #fff;} tr:hover{background: #cc0;} td a{color: #06f;text-decoration: none;} td a:hove{color: #06f;text-decoration: underline;}

  • 05

    5. 在html文件的【head】区域块中引用css文件，代码如下 <style type="text/css"> @import "css_file.css" </style>

  • 06

    6. 表格显示效果如图所示。

  • 07

    如果您觉得有用，记得在下方点 击投票、点赞、关注、留言，小编会定期奉上更多的惊喜哦，您的支持才是小编继续努力的动力，么么哒。

赞 (0)

相关推荐

  • H5(html)：table表格 合并单元格 行列合并

    对于table标签,在传统html页面或者H5页面都是一样的表现形式与设置方式.本文为您介绍table表格的使用,与如何合并行单元格与列单元格. 本文使用VSCode工具快速构建H5界面DOM结构,不 ...

  • 企业微信APP怎么创建在线协同编辑表格

    企业微信APP怎么创建在线协同编辑表格

    企业微信APP怎么创建在线协同编辑表格呢,下面小编介绍一下.具体如下:1. 打开[企业微信]APP,点击左侧的[微文档]2. 打开后,点击左侧的"收集表"或者"历史表格& ...

  • 如何取消table表格之间的空隙

    如何取消table表格之间的空隙 操作方法 01 新建html文件 02 插入表格 03 插入表格代码 04 插入表格视图模式 05 定义表格宽度并在表格中添加数据 06 浏览器预览效果如图,这是表格 ...

  • DW中如何插入table表格【基础教程】

    DW中如何插入table表格[基础教程] 操作方法 01 在插入选项中,选择Table选项 02 在表格设置栏中,上方可以设置表格的行数.列数以及整个表格的宽度值,下方标题选项,可以设置标题所在的位置 ...

  • html中table表格的属性的使用

    html中table表格的属性是怎么使用的?其实很简单,下面我们以几个典型的属性来说明一下. 操作方法 01 首先是colspan属性,这是合并单元格的,一般一个表格的每一行的单元格数目都是一致的,但 ...

  • 如何利用Bootstrap美化table表格？

    Bootstrap是最受欢迎的 HTML.CSS 和 JS 框架之一,它定义的css样式代码,为我们平常使用的绝大多数HTML控件都做了统一的样式外观.下面我们看下怎么利用Bootstrap来美化ta ...

  • table表格跨列；colspan的使用

    在使用表格制作一些表单数据,时常需要弄一些跨列的效果,table标签提供colspan属性进行跨列的设置. 操作方法 01 在需要制作跨列的<td>标签上添加colspan = " ...

  • Dreamweaver CC2018用table表格制作网页框架

    Dreamweaver CC2018怎么用table\tr\TD表格快速制作一个简单的网页框架呢? 操作方法 01 打开DW软件,新建一个html网页.在body标签中点击一下,然后点击顶部菜单栏-插 ...

  • 如何在手机WPS中创建隐藏保护的表格

    WPS Office手机版是运行于Android 平台上的办公软件.兼容桌面办公文档,支持DOC/DOCX/WPS/XLS/XLSX/PPT/PPTX/TXT/PDF等23种文件格式.下面教你在手机W ...