首页 > 软件开发 > HTML >

如何动手写移动Web网站:[2]HTML中的表格

来源:互联网 2023-03-16 19:19:40 514

html中的表格, 该内容算是在html中展现数据使用最多的一种方式了. 我这人做东西还有学习一个东西的时候, 都是直接拿来语法, 先去尝试去做一些东西, 这样可以做出来一些效果, 而且还有可能做不出来, 在做不出来的时候, 就有动力去查一些东西了. 跟着我! Let's go!PF2办公区 - 实用经验教程分享!

工具/原料

  • 一个文本编辑器即可, 这样就可以书写html的代码。还是推荐一个可以语法高亮的编辑器,比方说,notepad /

方法/步骤1

  • 1

    表格中使用table这个标签来标识是一个表格内容. 一个完整的表格是由三部分来完成的.分别为:thead表格的页眉 tbody表格的内容 tfoot 表格的页脚. 然后tr行标签, td列标签. th表格的表头 PF2办公区 - 实用经验教程分享!

    如何动手写移动Web网站:[2]HTML中的表格PF2办公区 - 实用经验教程分享!

  • 2

    在表格中tr就是代表着是行的概念, 和我们现实中的行是一个概念, td 代表着列。 它就像我们小时候的时候, 写的田字格, 然后里面一个一个的字, 就是一行里面的一列一列。 所以tr行中可以有td, 这里我们在table中加入一个border="1"。 这个意思为了在table上加上一个边框, 更容易让大家看明白更加清晰。PF2办公区 - 实用经验教程分享!

    如何动手写移动Web网站:[2]HTML中的表格PF2办公区 - 实用经验教程分享!

    如何动手写移动Web网站:[2]HTML中的表格PF2办公区 - 实用经验教程分享!

  • 3

    可以针对table做其中的内容对齐, 比方说: 我先在想让一行数据, 居中显示内容。 那我们可以使用align属性来显示, 为了更好的显示内容对齐方式内容。 小编这里使用了一个width的属性, 意思是让展现的内容长度为500px(像素), 图一代码, 图2展示效果。这个是对齐方式,总共有3中, 分别试: 居左, 居右和居中。 align="left", align="right", align="center"PF2办公区 - 实用经验教程分享!

    如何动手写移动Web网站:[2]HTML中的表格PF2办公区 - 实用经验教程分享!

    如何动手写移动Web网站:[2]HTML中的表格PF2办公区 - 实用经验教程分享!

  • 3相关内容未经授权抓取自百度经验
  • 4

    列的内容填充。 就是让内容和边框有一定的距离这样我们使用。 cellpadding 如果我们想让列和列有一定的间距。 那样我们就使用cellspacingPF2办公区 - 实用经验教程分享!

    如何动手写移动Web网站:[2]HTML中的表格PF2办公区 - 实用经验教程分享!

    如何动手写移动Web网站:[2]HTML中的表格PF2办公区 - 实用经验教程分享!

    如何动手写移动Web网站:[2]HTML中的表格PF2办公区 - 实用经验教程分享!

    如何动手写移动Web网站:[2]HTML中的表格PF2办公区 - 实用经验教程分享!

  • 5

    在我们处理Excel的使用, 会用到合并单元格的功能, 就是两列合并在一起, 还有的时候, 需要两行的某一列合并。 这个时候, 就需要用到:colspan 和 rowspan, 使用方法如图: PF2办公区 - 实用经验教程分享!

    如何动手写移动Web网站:[2]HTML中的表格PF2办公区 - 实用经验教程分享!

    如何动手写移动Web网站:[2]HTML中的表格PF2办公区 - 实用经验教程分享!

    如何动手写移动Web网站:[2]HTML中的表格PF2办公区 - 实用经验教程分享!

    如何动手写移动Web网站:[2]HTML中的表格PF2办公区 - 实用经验教程分享!

  • 6

    表格的内容说这么多, 这些基础的东西, 在w3c上去看到。 以后会慢慢的加快了。之后会把html写的更加简练, 以后供我们开发移动端的项目, 毕竟项目包含前端和后台。 前台的模板, 就是为了后台数据的展现。 所以, 能够写好前端, 也是一门技术。 只要用心学习。 一定能够很快的加入web开发行列。 加油!!!!PF2办公区 - 实用经验教程分享!

  • 7

    还有需要注意的是,我们在开发过程中,特别是前端,不会只用html来做前端的,所以这篇文章主要也是为了能够更好的学习html中表格的内容而写,为了之后的移动网站做打算。PF2办公区 - 实用经验教程分享!

  • 注意事项

    • html都是一些标签性的东西, 可以看一些文档快读的阅读, 你会发现, html并没有你想的那么难。PF2办公区 - 实用经验教程分享!

    • 动手去做, 比说什么都强, Good luck!!!PF2办公区 - 实用经验教程分享!

    如何学习html|下一篇:

    以上方法由办公区教程网编辑摘抄自百度经验可供大家参考!PF2办公区 - 实用经验教程分享!


    标签: HTML表格

    办公区 Copyright © 2016-2023 www.bgqu.net. Some Rights Reserved. 备案号:湘ICP备2020019561号统计代码