__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 ...
随机推荐
- Java实现AES加密
一)什么是AES? 高级加密标准(英语:Advanced Encryption Standard,缩写:AES),是一种区块加密标准.这个标准用来替代原先的DES,已经被多方分析且广为全世界所使用. ...
- SpringBoot系列: 使用 consul 作为服务注册组件
本文基本上摘自纯洁的微笑的博客 http://www.ityouknow.com/springcloud/2018/07/20/spring-cloud-consul.html . 感谢作者的付出. ...
- Beamer中左边画图, 右边文字解释
\begin{columns} \column{.4\textwidth} \begin{figure} \centering % Requires \usepackage{graphicx} \in ...
- sqlmap基础入门超详细教程
前言: 总算进入了自己喜欢的行业. 要时刻记得当初自己说过的话, 不忘初心. Come on! 资料: 感谢超哥分享的干货.. sqlmap干货点击直达 学习环境: 本次学习使用的是kali集成的s ...
- 使用工具intellij idea 进行java web开发简介
一.工具下载及安装准备 1.首先下载工具 Intellij idea ,下载地址:https://www.jetbrains.com/ 2.破解 百度下载一个 JetbrainsCrack-2.7- ...
- centos7.6编译安装php7.2.11及redis/memcached/rabbitmq/openssl/curl等常见扩展
centos7.6编译安装php7..11及redis/memcached/rabbitmq/openssl/curl等常见扩展 获取Php的编译参数方法: [root@eus-api-cms-bac ...
- oracle 11.2.0.4 rac 修改 ip vip scan ip
修改前host文件 198.27.73.21 ht-d01 198.27.73.22 ht-d02 198.27.73.25 ht-d01-vip 198.27.73.26 ht-d02-vip 19 ...
- vue-i18n国际化在data中切换不起作用
vue-i18n是一个针对于vue的国际化插件,使用非常简单,具体使用方式看我细细道来. 实现方式 1. 下载包 npm install vue-i18n 2. 配置 在main.js文件中加入如下配 ...
- 《剑指offer》整数中1出现的次数
本题来自<剑指offer> 反转链表 题目: 思路: C++ Code: Python Code: 总结:
- Jmeter_24个常用函数
JMeter提供了很多函数,如果能够熟练使用,可以为脚本带来很多方便. JMeter函数是一种特殊值,可用于除测试计划外的任何组件. 函数调用的格式如下所示:${__functionName(var1 ...