创建HTMl表格

设计一个这样的表格

需要用到的元素:

<table>标签定义表格。

<tr> 标签定义表格的行。

 <td> 标签定义每行被分割为若干单元格,单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等

<caption>标签定义表格标题。caption 标签必须紧随 table 标签之后,只能对每个表格定义一个标题,默认这个标题会居中于表格之上。

可以在<td>标签放<table>标签

图中表格的第五栏有两行,其中两个数据的三个格合并了2个单元格,用rowspan="2"表示

表格样式

caption-side:bottom,把默认会居中于表格之上的标题放在表格之下。

border-collapse:collpase,把两个单元格的距离设为零。还可以通过border-spacing设置,比如border-spacing:10px 30 px;这两个方法都是对整个表格的单元格间的距离进行设置,不能对单个单元格进行设置

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • HTML标签解释大全 一、HTML标记 标签:!DOCTYPE 说明:指定了 HTML 文档遵循的文档类型定义(D...
    米塔塔阅读 3,331评论 1 41
  • 浏览器与服务器的基本概念 浏览器(安装在电脑里面的一个软件) 作用: ①将网页内容渲染呈现给用户查看。 ②让用户通...
    云还灬阅读 1,164评论 0 0
  • 概述 在网易云课堂学习李南江老师的《从零玩转HTML5前端+跨平台开发》时,所整理的笔记。笔记内容为根据个人需求所...
    墨荀阅读 2,380评论 0 7
  • 一、介绍 表格,又称为表,即是一种可视化交流模式,又是一种组织整理数据的手段。人们在通讯交流、科学研究以及数据分析...
    走着别浪阅读 457评论 0 3
  • 一.有序列表 (ordered list) 格式: 语义及运用:给一堆数据添加列表语义,数据有先后之分。常运用于歌...
    饥人谷_刘冲阅读 1,685评论 0 1