HTML基础 - HTML表格
HTML基础 - HTML表格
1.无表头的表格 <table> <tr> <td>
<table>
标签代表的是表
<tr>
标签代表的是行
<td>
标签代表的是列
在html页面中的表格来着,就和excl的表格不一样喽,咱自己有自己的规则:
这就是没有表头,也就是最简单的一个表格。(设置了边框为1 :border= “1”)
去掉多余框格线 cellspacing=”0”
这个时候咱们看表格中有些奇奇怪怪的框格对吧,怎么去掉他们呢:
这样就舒服多啦。
表格在网页居中显示 align=“center”
上一张图能看见,表格是在网页的左上方显示,那么显示的位置怎么变换呢,比如使它居中显示:
这就跑到页面中部啦。
2.有表头的表格 <th>
<th>
表示就是表头了哦,字体是加粗居中显示的
在日常开发中,如果只有一个表格比较容易让人不明所以,这时候就需要有表头啦,表面这是个啥,或者说每一列代表了什么东西
3.有标题的表格 <caption>
<caption>
标签表示表头
前面说了每一列是什么意思,现在需要有标题了,标题就是让人明白这个表是啥意思,具体想干啥:
4.定义每一列的样式 <colgroup> <col>
使用<colgroup>
标签内的<col>
例:
使一行为蓝色
<col span="1" style="background-color: aqua;">
使两行为橘色
<col span="2" style="background-color: orange;">
span等于几,就是代表让几列变色
5.页眉,主体,页脚 <thead> <tbody> <tfoot>
<thead>
页眉标签,页眉的位置是在文章的上部
<tbody>
主体标签,表示内容主题
<tfoot>
页脚标签,表示内容最后
正常一般的文章呢也是这样的,页眉在上,页脚在下,主题在中间。
其实有时候直接照文章从上到下的排列顺序也可以达到这样的要求,那么为什么非得定个什么页眉标签<thead>
,页脚标签<tbody>
和主题标签<tfoot>
呢?
因为这些标签是用来固定我们的数据的,比如页眉标签,只要我使用了,不管是代码中放在哪里,它都能自己找到自己该在的位置,然后乖乖跑过去呆着,其他的也是一样:
6.合并单元格 行 关键词:colspan
首先呢,这是最原本的表格
现在呢,咱需要把“嘉文”和“提莫”合并在一起,并且取个新名字叫“嘉文四世”,
对比之前的图片可以看见,删除了“提莫”那一行数据,然后把原本的“嘉文”改成了“嘉文四世”,并且在与之对应的<td>
标签上增加了colspan=”2”。
注:colspan=“2” 代表合并两个单元格,数字越往上加,代表合并单元格越多
7.合并单元格 列 关键词:rowspan
首先呢,这是最原本的表格
现在呢,咱们需要把“金克斯”和“伊芙琳”给合并了,并且起个新名字叫“暴走萝莉”。
和之前对比可以发现<td>
标签新增了rowspan=”2”,并且删除了原本的“金克斯”改成了“暴走萝莉”,并且删除了原本的“伊芙琳”那一行数据。
注:rowspan=“2” 代表合并两个单元格,数字越往上加,代表合并单元格越多
HTML基础 - HTML表格相关推荐
- Bootstrap 基础五表格
原文:Bootstrap <基础五>表格 Bootstrap 提供了一个清晰的创建表格的布局.下表列出了 Bootstrap 支持的一些表格元素: 标签 描述 <table> ...
- 中职计算机应用基础word表格,计算机应用基础-word表格编辑.ppt
计算机应用基础-word表格编辑.ppt (25页) 本资源提供全文预览,点击全文预览即可全文预览,如果喜欢文档就下载吧,查找使用更方便哦! 19.9 积分 计算机应用基础 贵州交通职业技术学院 信息 ...
- 计算机基础做表格,表格的制作计算机基础.doc
表格的制作计算机基础 Word表格的制作 实验目的和要求: 1.掌握表格的创建方法 2.掌握表格的编辑 3.掌握表格的排版 4.掌握表格与文本的转换 5.掌握表格的跨页设置 注意:本实验要求熟悉[表格 ...
- 计算机word表格基础,Word表格的作-计算机基础.doc
Word表格的作-计算机基础 Word表格的制作 实验目的和要求: 1.掌握表格的创建方法 2.掌握表格的编辑 3.掌握表格的排版 4.掌握表格与文本的转换 5.掌握表格的跨页设置 注意:本实验要求熟 ...
- 计算机基础表格函数基础知识大全,大一计算机题库和答案:大一计算机基础excel表格操作题求解if函数部分...
大一计算机基础excel表格操作题求解if函数部分 引号呢?字符串必须要用引号引起来,不然就是变量,就非法了.要类似这样: =IF(C3="电子",11000) 大学计算机基础期末 ...
- HTML基础教程 表格
HTML基础教程 表格 基本格式 三行三列表格 例: 网页形态 tr和/tr表示单元格中的行数 td和/td表示单元格中的列数,其中包含的内容则表示单元格中的内容 th和/th为表格添加标题行 例: ...
- 【HTML基础】表格和表单
本次博客的主要内容如下: meta和link 表格 表单 meta和link meta meta的属性有两种:name和http-equiv. name属性主要用于描述网页内容,对应与网页内容. 1. ...
- 计算机应用基础 制作表格说课稿,使用Word制作表格说课稿.doc
文档介绍: <使用Word制作表格>说课稿各位老师大家好,我说课的题目是<使用Word制作表格>.下面我将从教材.教法.学法.教学过程,教学反思几个方面来说明本课.一.说教材: ...
- 计算机基础知识表格怎么加密,[电子表格]哪位了解如何给电子表格加密
哪位了解如何给电子表格加密 ●1.首先需要点OFFICE按钮,准备,加密文档;2.输入密码,点确定,搜索到这个功能;3.再次重新输入密码,点确定,这个表格就被加密了,下次进入就需要密码了. 希望我的回 ...
最新文章
- Java Web开发API Boy如何进阶?
- 64位内核第一讲,和32位内核的区别
- 机器学习中的评价指标--1[F,P,R]
- python 累加器_Python编程第5课:累加器,变量与赋值进阶练习
- givemesomecredit数据_你是如何走上数据分析之路的?
- HD-SDI DVR发展与应用剖析
- 封头名义厚度如何圆整_松原封头价格
- 右键文件夹电脑卡死?
- VS2010+Opencv_2.4.7+win7的配置攻略及错误解决
- js 复制图片到剪切板 和 js复制文本到剪切板
- C++实现计算器功能(包括计算含未知量的式子),输出后缀表达式
- 如何快速构建一个企业revit族库(含插件)
- 嵌入式Linux开发工具C语言 Makefile的编写
- CAN学习笔记二:OSEK NM 学习
- 加密所有事物,将数据安全存储在任何地方
- 华为HCIE证书含金量
- Xamarin.Android之绑定库教程
- Linux:VNC桌面锁屏问题处理
- c++解一元三次方程
- Windows服务器更改远程端口3389