【温故知新】HTML学习笔记（表格）

表格Table

用来处理和显示数据。
学习要求：能手写表格结构，能合并单元格。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Table</title>
</head>
<body><table width="500" border="1"><tr><td>姓名</td><td>性别</td><td>电话</td></tr><tr><td>小王</td><td>男</td><td>1391591236</td></tr><tr><td>小金</td><td>女</td><td>15863251122</td></tr></table>
</body>
</html>

<table>里面只能装<tr>（代表行），<tr>里面只能装<td>（代表单元格）。
table的常用属性：

border：表格的边框（默认为border=“0”无边框）；
cellspacing：单元格与单元格边框之间的空白间距（默认2像素）；
cellpadding：单元格内容与单元格边框之间的空白间距（默认1像素）；
width：表格的宽度（像素值）；
height：表格的高度（像素值）；
align：表格在网页中的水平对齐方式（left、center、right）；

注意→正常三参为0：border、cellspacing、cellpadding设置为0

表头标签

<th> </th> 即表头单元格，一般用于第一行或者第一列，其文本加粗居中。

 <table width="500" border="1" align="center" cellspacing="0" cellpadding="10"><tr><th>姓名</th><th>性别</th><th>电话</th></tr><tr><td>小王</td><td>男</td><td>1391591236</td></tr><tr><td>小金</td><td>女</td><td>15863251122</td></tr></table>

表格标题

    <table><caption>个人信息表</caption></table>

caption标签必须紧随table标签之后（只存在表格里面），只能对每个表格定义一个标题。

表格结构

头部：<thead> </thead>
主题：<tbody> </tbody>

合并单元格

跨行合并：rowspan 合并为列
跨列合并：colspan 合并为行

合并顺序：自上而下，先左后右。
删除的个数 = 合并的个数 - 1。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title>
</head><body><table  width="400" height="100" border="1">  <tr><td>AA</td><td>BB</td><td>CC</td> </tr><tr><td>AA</td><td>BB</td><td>CC</td> </tr><tr><td>AA</td><td colspan="2">BB</td><!-- <td>CC</td> --></tr></table></body>
</html>

【温故知新】HTML学习笔记（表格）相关推荐

关于css加div布局和表格布局,菜鸟学习笔记:表格布局和div+css布局
网页布局可以通过表格和div元素来实现(注:table布局已经淘汰),首先我们来看看table布局表格布局导航推荐文章一个猴子成长史你看个毛线我就瞅你咋地村里出了个半边天一个猴子的成长 ...
Markdown基本语法学习笔记----表格序号31
一.标题使用 # 来标注标题的书写,#后需要加一个字符空格再加标题文字 #是一级标题的,##是二级标题,以此类推,最多支持六级标题. 示例: # 这是一级标题 ## 这是二级标题 ### 这是三级标 ...
2017-2-15从0开始前端学习笔记（HTML）-图片-表格-表单
2017-2-15从0开始前端学习笔记-图片-表格-表单标签图片图片<img src="#" alt="文本说明不能加载图片时显示" title= ...
JavaScript学习笔记07【6个经典案例——电灯开关、轮播图、自动跳转首页、动态表格、表格全选、表单验证】
Java后端学习路线笔记汇总表[黑马程序员] w3school 在线教程:https://www.w3school.com.cn JavaScript学习笔记01[基础--简介.基础语法.运算符. ...
iView学习笔记(三)：表格搜索，过滤及隐藏列操作
iView学习笔记(三):表格搜索,过滤及隐藏某列操作 1.后端准备工作环境说明 python版本:3.6.6 Django版本:1.11.8 数据库:MariaDB 5.5.60 新建Django ...
二、LaTeX学习笔记——基本结构、设置表格、文字变形及符号、插入图片
LaTeX学习笔记写在最前面:LaTeX的注释符界面字体放大一.环境搭建与RUN 二.基本结构三.设置表格四.文字变形及符号五.插入图片附录.一些小tip LaTeX是一个可以用于文字编 ...
Python数据分析三剑客学习笔记Day3——pandas包的使用：认识series类型，DataFrame类型，读取excel表格数据及数据操作
本文是视频Python数据分析三剑客数学建模基础 numpy.pandas.matplotlib的学习笔记. -------------------------------------------- ...
3、Latex学习笔记之表格篇
目录表格 1.基本结构 1.1框架 1.2行高 1.3标题 1.4标签 1.5居中 1.6表格 2.引用表格 3.常见表格类型 3.1三线表 3.2 斜线表头 3.3合并单元格 4.在线表格生成工具 ...
WPS文字 JSA 学习笔记 - 批量设置表格
WPS文字 JSA 学习笔记 - 批量设置表格创建表格样式批量设置表格返回当前表格索引参考资料创建表格样式 function 创建表格样式(styleName = "表格" ...
WPS表格学习笔记 - 高亮显示重复值
WPS表格学习笔记 - 高亮显示重复值 1. 普通数据,直接使用条件格式 2. 超过15的长数字 1. 普通数据,直接使用条件格式 2. 超过15的长数字数据 > 重复项 > 设置高亮 ...

【温故知新】HTML学习笔记（表格）

【温故知新】HTML学习笔记（表格）相关推荐

最新文章

热门文章