__x__(39)0909第五天__ 表格 table
表格
表示一种格式化的数据，如课程表，银行对账单... ...
在网页中，使用 table 创建一个表格。
html代码：
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>表格</title> <link rel="stylesheet" type="text/css" href="css/table.css" />
</head> <body>
Hello Web!` <br />
可以发现：
table 是<b>块元素</b>，独占一行。
<table id="tb_one">
<tr>
<td>第1行，第1格</td>
<td>第1行，第2格</td>
<td>第1行，第3格</td>
</tr> <tr>
<td>第2行，第1格</td>
<td>第2行，第2格</td>
<td>第2行，第3格</td>
</tr> <tr>
<td>第3行，第1格</td>
<td>第3行，第2格</td>
<td>第3行，第3格</td>
</tr>
</table> <hr />
就算某个格子是空的，也不会被已有格子占据。
<table id="tb_two">
<tr>
<td>第1行，第1格</td>
<td>第1行，第2格</td>
<td>第1行，第3格</td>
</tr> <tr>
<td>第2行，第1格</td>
<td>第2行，第2格</td>
</tr> <tr>
<td>第3行，第1格</td>
<td>第3行，第2格</td>
</tr>
</table> <hr />
需要告诉浏览器， <br />
colspan是<b>横向合并单元格</b> <br />
rowspan是<b>纵向合并单元格</b> <br />
且是<b>往右边</b>，<b>往下边</b>的单元格合并。
<table id="tb_three">
<tr>
<td>第1行，第1格</td>
<td>第1行，第2格</td>
<td rowspan="2">第1行，第3格</td>
</tr> <tr>
<td>第2行，第1格</td>
<td>第2行，第2格</td>
</tr> <tr>
<td>第3行，第1格</td>
<td colspan="2">第3行，第2格</td>
</tr>
</table>
</body>
</html>
css代码：
@charset "utf-8";
*{
margin: 0px;
padding: 0px;
}
body{
background-color: #3e4e54;
}
table{
margin: 0px auto;
width: 40%;
border: 1px red solid;
}
#tb_one td{
}
#tb_two td{
border: 1px black solid;
}
#tb_three td{
border: 1px black solid;
}
__x__(39)0909第五天__ 表格 table的更多相关文章
- __x__(40)0909第五天__表格 table 的 css 样式 美化
如果就向下面的代码那样,不写 tbody , 则浏览器自添加 tbody , 并将所有的 tr 移入 tbody 意味着 tr 并非 table 的子元素,而是 tbody 的子元素. 所以 以后编写 ...
- __x__(41)0909第五天__长表格
长表格 银行流水,表格很长... 则需要将表格分为 表头 thead ,主体数据 tbody , 表格底部 tfoot 三个标签无顺序要求,易于维护:thead → tfoot → tbody 如果没 ...
- __x__(37)0909第五天__背景图按钮
link,hover,active三种按键状态,存放三张图片 缺点: 资源只有在被使用时,才会被加载. 页面第一次加载时,会出现短暂的延迟闪烁,造成一次不佳的用户体验. 图片整合技术 CSS-Spri ...
- __x__(38)0909第五天__雪碧图的制作
1. 用ps打开目标图片若干. 2. 调整合适的画布大小. 3. 将图片拖曳到一张里. 4. 存储为Web所用格式,选择 png24 .
- __x__(29)0908第五天__高度塌陷 问题
高度塌陷 在文档流中,父元素的高度默认是被子元素撑开的. 但是当为 子元素 设置 float 时,子元素会完全脱离文档流,无法再撑开父元素,导致父元素高度塌陷...以致于布局混乱 变成 BFC块级格式 ...
- __x__(30)0908第五天__导航条的练习 <div>版本
效果图: html源代码: <!doctype html> <html> <head> <meta charset="utf-8" /& ...
- __x__(31)0908第五天__导航条的练习 <ul> 版本
效果图: html代码: <!doctype html> <html> <head> <meta charset="utf-8" /&g ...
- __x__(34)0908第五天__ 定位 position
position 定位 指将原始摆放到页面的任意位置. 继承性:no 默认值:static 没有定位,原始出现在正常的文档流中 可选值: static : 默认值,元素没有开启定位 ...
- __x__(35)0908第五天__ 层级 z-index
如果三个 div 全部设置 position: absolute; 绝对定位,且未设置 z-index, 则从代码结构上 下面的元素 会盖住 上面的元素. z-index 层级: 通过 z-i ...
随机推荐
- Visual Studio图形调试器详细使用教程(基于DirectX11)
前言 对于DirectX程序开发者来说,学会使用Visual Studio Graphics Debugger(图形调试器)可以帮助你全面了解渲染管线绑定的资源和运行状态,从而确认问题所在.现在就以我 ...
- 第十节: 利用SQLServer实现Quartz的持久化和双机热备的集群模式 :
背景: 默认情况下,Quartz.Net作业是持久化在内存中的,即 quartz.jobStore.type = "Quartz.Simpl.RAMJobStore, Quartz" ...
- tex中pdf外链
\documentclass{article} \usepackage{hyperref} \begin{document} \href{run:d:/my folder/test.pdf}{This ...
- [物理学与PDEs]第5章第2节 变形的描述, 应变张量 2.3 位移梯度张量与无穷小应变张量
1. 位移向量 $$\bex {\bf u}={\bf y}-{\bf x}. \eex$$ 2. 位移梯度张量 $$\bex \n_x{\bf u}={\bf F}-{\bf I}. \eex$ ...
- Centos7 安装 python2.7
Centos7 安装 python 2.7.15 和 pip 1.先安装 GCC 包,如果没安装 GCC包 就输入以下命令行安装: (*注:以下记得使用 su 权限) yum install gcc ...
- codeforces 787D - Legacy 线段树优化建图,最短路
题意: 有n个点,q个询问, 每次询问有一种操作. 操作1:u→[l,r](即u到l,l+1,l+2,...,r距离均为w)的距离为w: 操作2:[l,r]→u的距离为w 操作3:u到v的距离为w 最 ...
- 11.2.0.4 aix下运行第二个节点root.sh报错处理
第二个节点运行root.sh报错如下 Entries will be added to the /etc/oratab file as needed by Database Configuration ...
- UiAutomator1.0 与 UiAutomator2.0
在使用2.0之前,对android自动化框架也做过一些了解<Android 自动化测试框架>.使用UiAutomator2.0也有一段时间,这里将1.0与2.0进行一个对比总结. Ui ...
- djjango安装及其 操作命令
一 首先掌握HTTP协议 HTTP四大特性: 1 基于tcp/IP作用在应用层之上的协议 2 基于请求响应 3 无状态(不识别来的用户的状态) 4 无连接(请求完返回响应后就断开) 数据格式: 请求 ...
- RC terms.
ETA: estimated time of arrival DEA: 1-Leg: 2-Leg: FCC: L10N: LocalizatioN i18N: InternationalizatioN ...