lesson8--table标签

最新推荐文章于 2017-07-25 22:39:00 发布
最新推荐文章于 2017-07-25 22:39:00 发布
阅读量377 收藏
点赞数 1
分类专栏： web开发

一、table的注意事项

<style>

/* table css reset */

th,td{padding:0;}

/*去掉单元格间的间隙*/
 table{border-collapse:collapse;}

th,td{border:1px solid black; height:50px; width:100px;}

table{width:500px;}/*决定了table的宽度*/

/* 

colspan  属性规定单元格可横跨的列数。

rowspan  属性规定单元格可横跨的行数。

注意：将被合并的行或列删除。

<th colspan="2">表格标题</th>

<td rowspan="2">单元格</td>

<td colspan="2" rowspan="3">单元格</td>

 */

注意事项：
 1、不要给table,th,td以外的表格标签加样式；
 2、单元格默认平分table 的宽度
 3、th里面的内容默认加粗并且左右上下居中显示
 4、td里面的内容默认上下居中左右居左显示
 5、 table 决定了整个表格的宽度；
 6、table里面的单元格宽度会被转换成百分比；
 7、 表格里面的每一列必须有宽度；
 8、表格同一竖列继承最大宽度；
 9、表格同行继承最大高度；
  */
 </style>

table 的标签基本特性是: display:table;既不是内嵌元素也不是块元素，也不是inline-block特性。

二、表格的完整结构：

<table><!-- 表格 -->

<thead><!-- 表格头部 -->

  <tr><!-- 行 -->

    <th>表格标题</th>

      <th>表格标题</th>

      <th>表格标题</th>

      <th>表格标题</th>

      <th>表格标题</th>

    </tr>

  </thead>

<tbody><!-- 表格主体 -->

  <tr>

    <td>单元格</td>

      <td>单元格</td>

      <td>单元格</td>

      <td>单元格</td>

      <td>单元格</td>

    </tr>

    <tr>

    <td>单元格</td>

      <td>单元格</td>

      <td>单元格</td>

      <td>单元格</td>

      <td>单元格</td>

    </tr>

    <tr>

    <td>单元格</td>

      <td>单元格</td>

      <td>单元格</td>

      <td>单元格</td>

      <td>单元格</td>

    </tr>

  </tbody>

  <tfoot><!-- 表格尾部 -->

  <tr>

    <td>单元格</td>

      <td>单元格</td>

      <td>单元格</td>

      <td>单元格</td>

      <td>单元格</td>

    </tr>

  </tfoot>

</table>

三、天气预报实例：

<!DOCTYPE HTML>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<title>无标题文档</title>

<style>

th,td{padding:0;}

table{border-collapse:collapse;}

/* table css reset */


.tab{ width:640px; margin:90px auto;}

.tab th,.tab td{border:1px solid #99b0da;}

.tab th{ height:30px; font-size:14px; background:#dbe3fa;}

.tab td{ height:28px; font-size:12px; text-align:center;}

img{vertical-align:top;}/*处理图片的间隙*/

.tab .none{border:none; height:4px; overflow: hidden;}

</style>

</head>

<body>

<table class="tab">

<tbody>

  <tr>

    <th colspan="2" width="172">日期</th>

      <th colspan="2" width="179">天气现象</th>

      <th width="95">气温</th>

      <th width="94">风向</th>

      <th width="94">风力</th>

    </tr>

    <tr>

    <td rowspan="2" width="95">星期五</td>

      <td width="76">白天</td>

      <td width="63"><img src="sun.jpg" alt=""/></td>

      <td width="115">晴天</td>

      <td>气温</td>

      <td>风向</td>

      <td>风力</td>

    </tr>

    <tr>

      <td>夜间</td>

      <td><img src="sun.jpg" alt=""/></td>

      <td>晴天</td>

      <td>气温</td>

      <td>风向</td>

      <td>风力</td>

    </tr>

    <tr>

    <td colspan="7" class="none"></td>

    </tr>

    <tr>

    <td rowspan="2" width="95">星期六</td>

      <td width="76">白天</td>

      <td width="63"><img src="sun.jpg" alt=""/></td>

      <td width="115">晴天</td>

      <td>气温</td>

      <td>风向</td>

      <td>风力</td>

    </tr>

    <tr>

      <td>夜间</td>

      <td><img src="sun.jpg" alt=""/></td>

      <td>晴天</td>

      <td>气温</td>

      <td>风向</td>

      <td>风力</td>

    </tr>

  </tbody>

</table>

</body>

</html>

伊美阳
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
统计软件与数据分析Lesson4 -----Lesson1--3 补充知识点
爱数据爱统计
03-14 365
python 常用知识点梳理
统计软件与数据分析Lesson9----爬虫解析库Beautiful Soup
爱数据爱统计
04-14 1085
统计软件与数据分析Lesson9----爬虫解析库Beautiful Soup知识点总结1.requests 模块1.1 查看requests功能函数1.2 发送请求1.3 传递URL参数1.4 获取响应内容2.Beautiful Soup模块2.1 解析器2.2 对象类型2.2.1 Beautiful Soup2.2.2 标签Tag2.2.3 可遍历的字符串NavigableString2.2.4 注释Comment2.2.5 对象比较2.2.6 复制对象2.3 遍历2.3.1 子节点 `.content
HTML 语法教学之表格标签
礷天設計
04-25 1490
【网页中的表格观念】 举个例子来说，如果今天我们要做一个3栏2列的表格，在WORD中，只要设定表格为3栏、2列就完成了，不过，在网页中做一个3栏2列的表格，可是要分成好几个步骤的，第一个步骤，利用标签告诉电脑我要做一个表格；第二个步骤，利用一组标签先做一个横列，然后在横列中利用三组标签再分出三栏；第三个步骤，重复第二个步骤，再做一横列然后再分三栏，如此才能得到一个3栏2列的表格。听不太懂吗？没关系
lesson-1
07-25 104
html文件由标签组成，接下来就分享一些常用的标签极其作用解释。 格式标签： <br>　　　　　　　　 换行标签 <hr>　　　　 　　　　 水瓶分割线标签 <p></p>　　 　　　　 段落标签 <pre></pre> 　　　　　按原格式显示标签 <ul></ul...
Lesson-3
03-10
在`<head>`中，`<title>`标签用于定义页面的标题，在浏览器的标签页上显示。 接着，我们讨论段落和标题。在HTML中，`<p>`标签用于创建段落，而`<h1>`到`<h6>`则用于表示不同级别的标题。`<h1>`是最高级的标题，通常...
lesson-6
03-19
表格在HTML中通过`<table>`、`<tr>`（行）、`<th>`（表头）和`<td>`（单元格）标签进行创建。表单是收集用户输入数据的关键，`<form>`、`<input>`、`<label>`、`<button>`等标签一起构成表单元素，例如文本输入框、...
COMP397-W2021-Lesson6a-Builds
03-12
4. **表格与列表**：学习如何使用`<table>`、`<tr>`、`<td>`创建表格，以及使用`<ul>`、`<ol>`、`<li>`创建无序和有序列表。 5. **表单处理**：理解`<form>`元素以及输入元素如`<input>`、`<textarea>`、`<select>`...
Lesson02_01 表格标签
10-31
`<caption>`标签用于设置表格的标题，放于`<table>`标签后面，显示表格的标题！ HTML表格标签是HTML语言中的一种基本标签，用于创建表格结构，使得网页内容更加有序和美观。通过学习和掌握这些标签，可以更好地...
lesson-001:你好吉特
03-28
8. **链接**：`<a>`标签用于创建超链接，`href`属性指定链接目标。 9. **表格**：`<table>`、`<tr>`（行）、`<td>`（单元格）和`<th>`（表头）用于创建表格。 10. **样式控制**：虽然HTML主要负责结构，但也可以...
pillow-10.4.0-pp39-pypy39_pp73-macosx_11_0_arm64.whl
07-27
基本介绍 名称与起源：Pillow，原名为PIL（Python Imaging Library），但PIL只支持Python 2版本。随着Python 3的普及，Pillow作为PIL的一个分支出现，兼容Python 3并提供更多的功能和改进。 主要功能：Pillow支持多种图像格式的打开、保存、显示以及基本的图像操作和处理，如裁剪、缩放、旋转、翻转、滤镜应用等。 跨平台性：Pillow库可以在不同的操作系统上运行，包括Windows、Linux和MacOS等。 主要功能模块 Pillow库包含多个功能模块，每个模块都提供了特定的图像处理功能。以下是一些常用的模块： Image：用于处理图像文件，提供打开、保存、调整大小、旋转、裁剪、滤镜等功能。 ImageDraw：提供在图像上绘制各种形状（如线条、矩形、圆形）和文本的功能。 ImageFont：用于加载和使用TrueType字体文件，以便在图像上绘制文本时设置字体样式、大小和颜色。 ImageFilter：提供各种滤镜效果，如模糊、锐化、边缘增强等，用于图像增强、特效处理和图像识别等应用。 ImageEnhance：用于调整图像的亮度、对比度、颜色饱和度等参数，使图像更加清晰、明亮或具有特定的调色效果。 高级功能 除了基本的图像处理功能外，Pillow还支持一些高级功能，如色彩空间转换、直方图均衡化等。这些功能可以帮助用户进行更复杂的图像处理和分析。
avif-0.5.0-cp35-cp35m-macosx_10_9_x86_64.whl
07-27
python库，可以直接安装使用，再也不怕自己pip下载，出现等待超时的现象。欢迎下载使用，使用过程中如有使用问题，请及时与我沟通交流，帮你解决！ python库，可以直接安装使用，再也不怕自己pip下载，出现等待超时的现象。欢迎下载使用，使用过程中如有使用问题，请及时与我沟通交流，帮你解决！ python库，可以直接安装使用，再也不怕自己pip下载，出现等待超时的现象。欢迎下载使用，使用过程中如有使用问题，请及时与我沟通交流，帮你解决！ python库，可以直接安装使用，再也不怕自己pip下载，出现等待超时的现象。欢迎下载使用，使用过程中如有使用问题，请及时与我沟通交流，帮你解决！ python库，可以直接安装使用，再也不怕自己pip下载，出现等待超时的现象。欢迎下载使用，使用过程中如有使用问题，请及时与我沟通交流，帮你解决！
pillow-10.4.0-cp39-cp39-musllinux_1_2_x86_64.whl
07-27
基本介绍 名称与起源：Pillow，原名为PIL（Python Imaging Library），但PIL只支持Python 2版本。随着Python 3的普及，Pillow作为PIL的一个分支出现，兼容Python 3并提供更多的功能和改进。 主要功能：Pillow支持多种图像格式的打开、保存、显示以及基本的图像操作和处理，如裁剪、缩放、旋转、翻转、滤镜应用等。 跨平台性：Pillow库可以在不同的操作系统上运行，包括Windows、Linux和MacOS等。 主要功能模块 Pillow库包含多个功能模块，每个模块都提供了特定的图像处理功能。以下是一些常用的模块： Image：用于处理图像文件，提供打开、保存、调整大小、旋转、裁剪、滤镜等功能。 ImageDraw：提供在图像上绘制各种形状（如线条、矩形、圆形）和文本的功能。 ImageFont：用于加载和使用TrueType字体文件，以便在图像上绘制文本时设置字体样式、大小和颜色。 ImageFilter：提供各种滤镜效果，如模糊、锐化、边缘增强等，用于图像增强、特效处理和图像识别等应用。 ImageEnhance：用于调整图像的亮度、对比度、颜色饱和度等参数，使图像更加清晰、明亮或具有特定的调色效果。 高级功能 除了基本的图像处理功能外，Pillow还支持一些高级功能，如色彩空间转换、直方图均衡化等。这些功能可以帮助用户进行更复杂的图像处理和分析。
1250KVA本体基础图11
07-27
1250KVA本体基础图11
毕业设计之网上订餐系统.zip
07-27
毕业设计之网上订餐系统.zip
pillow-10.4.0-cp39-cp39-win32.whl
07-27
基本介绍 名称与起源：Pillow，原名为PIL（Python Imaging Library），但PIL只支持Python 2版本。随着Python 3的普及，Pillow作为PIL的一个分支出现，兼容Python 3并提供更多的功能和改进。 主要功能：Pillow支持多种图像格式的打开、保存、显示以及基本的图像操作和处理，如裁剪、缩放、旋转、翻转、滤镜应用等。 跨平台性：Pillow库可以在不同的操作系统上运行，包括Windows、Linux和MacOS等。 主要功能模块 Pillow库包含多个功能模块，每个模块都提供了特定的图像处理功能。以下是一些常用的模块： Image：用于处理图像文件，提供打开、保存、调整大小、旋转、裁剪、滤镜等功能。 ImageDraw：提供在图像上绘制各种形状（如线条、矩形、圆形）和文本的功能。 ImageFont：用于加载和使用TrueType字体文件，以便在图像上绘制文本时设置字体样式、大小和颜色。 ImageFilter：提供各种滤镜效果，如模糊、锐化、边缘增强等，用于图像增强、特效处理和图像识别等应用。 ImageEnhance：用于调整图像的亮度、对比度、颜色饱和度等参数，使图像更加清晰、明亮或具有特定的调色效果。 高级功能 除了基本的图像处理功能外，Pillow还支持一些高级功能，如色彩空间转换、直方图均衡化等。这些功能可以帮助用户进行更复杂的图像处理和分析。
avif-0.5.0-cp39-cp39-manylinux1_i686.whl
07-27
python库，可以直接安装使用，再也不怕自己pip下载，出现等待超时的现象。欢迎下载使用，使用过程中如有使用问题，请及时与我沟通交流，帮你解决！ python库，可以直接安装使用，再也不怕自己pip下载，出现等待超时的现象。欢迎下载使用，使用过程中如有使用问题，请及时与我沟通交流，帮你解决！ python库，可以直接安装使用，再也不怕自己pip下载，出现等待超时的现象。欢迎下载使用，使用过程中如有使用问题，请及时与我沟通交流，帮你解决！ python库，可以直接安装使用，再也不怕自己pip下载，出现等待超时的现象。欢迎下载使用，使用过程中如有使用问题，请及时与我沟通交流，帮你解决！ python库，可以直接安装使用，再也不怕自己pip下载，出现等待超时的现象。欢迎下载使用，使用过程中如有使用问题，请及时与我沟通交流，帮你解决！
pillow-10.4.0-cp311-cp311-win_amd64.whl
07-27
基本介绍 名称与起源：Pillow，原名为PIL（Python Imaging Library），但PIL只支持Python 2版本。随着Python 3的普及，Pillow作为PIL的一个分支出现，兼容Python 3并提供更多的功能和改进。 主要功能：Pillow支持多种图像格式的打开、保存、显示以及基本的图像操作和处理，如裁剪、缩放、旋转、翻转、滤镜应用等。 跨平台性：Pillow库可以在不同的操作系统上运行，包括Windows、Linux和MacOS等。 主要功能模块 Pillow库包含多个功能模块，每个模块都提供了特定的图像处理功能。以下是一些常用的模块： Image：用于处理图像文件，提供打开、保存、调整大小、旋转、裁剪、滤镜等功能。 ImageDraw：提供在图像上绘制各种形状（如线条、矩形、圆形）和文本的功能。 ImageFont：用于加载和使用TrueType字体文件，以便在图像上绘制文本时设置字体样式、大小和颜色。 ImageFilter：提供各种滤镜效果，如模糊、锐化、边缘增强等，用于图像增强、特效处理和图像识别等应用。 ImageEnhance：用于调整图像的亮度、对比度、颜色饱和度等参数，使图像更加清晰、明亮或具有特定的调色效果。 高级功能 除了基本的图像处理功能外，Pillow还支持一些高级功能，如色彩空间转换、直方图均衡化等。这些功能可以帮助用户进行更复杂的图像处理和分析。
pi_heif-0.17.0-cp311-cp311-musllinux_1_2_aarch64.whl
最新发布
07-27
pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。
新概念英语第二册Lesson1-10知识点与练习解析
此外，Lesson1还介绍了一些实用的短语和表达，如 "be interesting" 表示有趣，"get angry" 意为生气，"turn round" 指的是转身，"pay attention" 是注意，"none of your business" 意思是不关你的事，"in the end" ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值