资讯专栏INFORMATION COLUMN

上云采购季！| 2核2G4M爆款云服务器低至59元/年，更有多台、长期优惠，快来选购！

立即前往
首页/文章专栏/HTML table基础

HTML table基础

lucas / 2232人阅读

摘要：前言中的标签表示表格数据通过二维数据表来展示信息。后语第一次是用写文章就发现可以将剪切板的图片粘贴添加到文章，很惊喜。之前使用的是作业部落，会员才能上传图片。

前言

HTML 中的

标签表示表格数据----通过二维数据表来展示信息。

表格相关的HTML标签：


表格标签的编写顺序：
定义表格 每个表格从
开始

用于对表格的列进行组合，以方便对列设置属性，可选

用于为表格的列设置属性，可选

用于对表格的表头内容进行分组，可选

用于对表格的页脚、脚注或表注进行分组，可选

用于组合表格的主体内容，可选

定义表格中的行 每个表格行从 开始

、 以及 很少被使用

表格实验1 . 无边框表格
</>复制代码
定义表格标题，可选（可写可不写，根据需要）
定义单元格 每个单元格从 开始

 定义表头单元格
100 200 300
400 500 600

2 . 普通边框表格 
</>复制代码 
  3.   
  4.   
  5.   
  8.   
  9.   
  10.   
  12. 100200300
    400500600

3 . 粗边框表格 
</>复制代码 
  3.   
  4.   
  7.   
  8.   
  10. FirstRow
       
    SecondRow

4 . 为表格设置cellpadding属性 
</>复制代码 
  3.   
  4.   
  7.   
  8.   
  10. FirstRow
       
    SecondRow

5 . 为表格设置cellspacing属性 
</>复制代码 
  3.   
  4.   
  7.   
  8.   
  10. FirstRow
       
    SecondRow

</>复制代码 
  3.   
  4.   
  7.   
  8.   
  10. FirstRow
       
    SecondRow

6 . 为表格设置border-collapse属性 
</>复制代码 
  3.   
  4.   
  7.   
  8.   
  10.    
    First Row
    SecondRow

7 . 为表格设置frame属性 
</>复制代码 
  2.   
  3.     
  4.     
  5.   
  6.   
  7.     
  8.     
  9.   
  10. MonthSavings
    January$100

</>复制代码 
  2.   
  3.     
  4.     
  5.   
  6.   
  7.     
  8.     
  9.   
  10. MonthSavings
    January$100

</>复制代码 
  2.   
  3.     
  4.     
  5.   
  6.   
  7.     
  8.     
  9.   
  10. MonthSavings
    January$100

8 . 表格跨列、跨行 
</>复制代码 
  4.   
  5.   
  8.   
  9.   
  10.   
  12. 姓名电话
    Bill Gates555 77 854555 77 855
  16.   
  17.   
  20.   
  21.   
  24.   
  26. 姓名Bill Gates
    电话555 77 854
    555 77 855

9 . 使用 为列设置属性 
</>复制代码 
  1. 为行设置属性? 设置即可。
</>复制代码 
  2.   
  3.   
  4.   
  5.   
  6.     
  7.     
  8.     
  9.   
  10.   
  11.     
  12.     
  13.     
  14.   
  15.   
  16.     
  17.     
  18.     
  19.   
  20. ISBNTitlePrice
    3476896My first HTML$53
    2489604My first CSS$47

</>复制代码 
  2.   
  3.   
  4.   
  5.     
  6.     
  7.     
  8.   
  9.   
  10.     
  11.     
  12.     
  13.   
  14.   
  15.     
  16.     
  17.     
  18.   
  19. ISBNTitlePrice
    3476896My first HTML$53
    2489604My first CSS$47

后语

第一次是用 segmentfault 写文章就发现可以将剪切板的图片粘贴（Ctrl + V）添加到文章，很惊喜。 之前使用的是作业部落，会员才能上传图片。

参考资料：
【1】W3school http://www.w3school.com.cn/ta...
【2】MDN https://developer.mozilla.org...

GPU云服务器 云服务器 html基础 html代码基础 html基础代码 html基础教程

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/50949.html

相关文章

  • CSS基础篇--你知道的display的值有多少？用了多少？

    摘要：与属性的值不同，其不为被隐藏的对象保留其物理空间指定对象为内联元素。指定对象作为块元素级的表格。类同于标签指定对象作为表格行组。伸缩盒过渡版本将对象作为弹性伸缩盒显示。伸缩盒最新版本新增属性可能存在描述错误及变更，仅供参考。 它的语法如下： display：none | inline | block | list-item | inline-block | table | inline...

    wangdai 评论0 收藏0

  • HTML基础系列

    摘要：标记语言，网页制作的第一步。什么是呢查百度基础语法常用标签是超文本标记语言，不用编译，直接在浏览器中执行，是一个文本文件。长按下方二维码可关注，欢迎分享，置顶尤佳。 HTML标记语言，网页制作的第一步。 什么是HTML呢？查百度 基础语法 常用标签 HTML是超文本标记语言，HTML不用编译，直接在浏览器中执行，HTML是一个文本文件。 HTML基本结构，标签，元素，属性，注...

    huangjinnan 评论0 收藏0

  • 回到基础：如何用原生 DOM API 生成表格

    摘要：接下来该填表了生成行和单元格为了填充表格可以遵循同样的方法，但这次我们需要迭代数组中的每个对象。对于每个对象，我们可以使用生成单元格。 翻译：疯狂的技术宅原文：https://www.valentinog.com/bl... 本文首发微信公众号：jingchengyideng欢迎关注，每天都给你推送新鲜的前端技术文章 怎样用原生 JavaScript 生成表格需？本文告诉你答案！...

    Sunxb 评论0 收藏0

  • WEB基础之HTML的各个标签的默认样式

    摘要：在中，了解各个标签的默认样式，有助于理解代码的表现，也有利于精简代码。 在HTML中，了解各个标签的默认样式，有助于理解代码的表现，也有利于精简代码。(๑•́ ₃ •̀๑) head{ display: none } body{ margin: 8px;line-height: 1.12 } button, textarea,input, object,select { ...

    ThinkSNS 评论0 收藏0

  • WEB基础之HTML的各个标签的默认样式

    摘要：在中，了解各个标签的默认样式，有助于理解代码的表现，也有利于精简代码。 在HTML中，了解各个标签的默认样式，有助于理解代码的表现，也有利于精简代码。(๑•́ ₃ •̀๑) head{ display: none } body{ margin: 8px;line-height: 1.12 } button, textarea,input, object,select { ...

    Jokcy 评论0 收藏0

发表评论

登陆后可评论

0条评论

lucas

男|高级讲师
我要私信

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<