HTML table基础

lucas 发布于2019-08-01 17:06 / 2163人阅读

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

前言

HTML 中的

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

表格相关的HTML标签：

表格标签的编写顺序：

定义表格每个表格从

开始

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

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

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

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

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

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

、以及很少被使用

表格实验1 . 无边框表格

定义表格标题，可选（可写可不写，根据需要）
定义单元格每个单元格从	开始	定义表头单元格

100	200	300
400	500	600

2 . 普通边框表格

3 . 粗边框表格



  First
  Row
   

  Second
  Row

4 . 为表格设置cellpadding属性



  First
  Row
   

  Second
  Row

5 . 为表格设置cellspacing属性



  First
  Row
   

  Second
  Row



  First
  Row
   

  Second
  Row

6 . 为表格设置border-collapse属性



  First 
  Row
   

  Second
  Row

7 . 为表格设置frame属性


  
    Month
    Savings
  
  
    January
    $100

Month	Savings
January	$100


  
    Month
    Savings
  
  
    January
    $100

Month	Savings
January	$100


  
    Month
    Savings
  
  
    January
    $100

Month	Savings
January	$100

8 . 表格跨列、跨行




  姓名
  电话


  Bill Gates
  555 77 854
  555 77 855







  姓名
  Bill Gates


  电话
  555 77 854


  555 77 855

姓名	电话
Bill Gates	555 77 854	555 77 855

姓名	Bill Gates
电话	555 77 854
555 77 855

9 . 使用为列设置属性

为行设置属性? 设置即可。


  
  
  
  
    ISBN
    Title
    Price
  
  
    3476896
    My first HTML
    $53
  
  
    2489604
    My first CSS
    $47

ISBN	Title	Price
3476896	My first HTML	$53
2489604	My first CSS	$47


  
  
  
    ISBN
    Title
    Price
  
  
    3476896
    My first HTML
    $53
  
  
    2489604
    My first CSS
    $47

ISBN	Title	Price
3476896	My first HTML	$53
2489604	My 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 2019-08-28 18:17 评论0 收藏0
HTML基础系列

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

huangjinnan 2019-04-22 16:12 评论0 收藏0
回到基础：如何用原生 DOM API 生成表格

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

Sunxb 2019-08-26 13:34 评论0 收藏0
WEB基础之HTML的各个标签的默认样式

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

ThinkSNS 2019-08-29 11:15 评论0 收藏0
WEB基础之HTML的各个标签的默认样式

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

Jokcy 2019-08-01 15:41 评论0 收藏0