笔记 - 2、HTML - 表格

简介: HTML·表格:用<table>标记声明一个表格(***) <tr>标记:表示表格的行,嵌套在<table></table>中。 <td></td>:表示表格的单元格,嵌套在<tr></tr>中。 <caption></caption>:表格的标题,写在表格的内部,
HTML·表格:用<table>标记声明一个表格(***)

<tr>标记:表示表格的行,嵌套在<table></table>中。
<td></td>:表示表格的单元格,嵌套在<tr></tr>中。
<caption></caption>:表格的标题,写在表格的内部,与<tr></tr>同级。

table的属性:
    border:表示表格的边框
    width:表示表格的宽度,可用像素值表示,也可用百分比来表示。
    height:表示表格的高度。只能以像素值表示,不能以百分比表示。
    align:表格的对齐方式left,center,right,默认是left。
    bordercolor:表示表格边框的颜色,只表示整个表格外边框的颜色。
    cellspacing:表示单元格与单元格之间的距离
    cellpadding:单元格中的内容与单元格边框的距离。
    bgcolor:表格的背景颜色。
    background:整个表格的背景图片。

tr的属性:
    height:设置当前行的高度,如果是你设置的高度比单元格中的内容的高度还要小的话,浏览器默认是内容有多高,这行就有多高。
    bordercolor:当前行单元格的边框颜色。只对一行起作用。
    bgcolor:表示当前行的背景颜色。会覆盖掉在table中设置的背景颜色。
    background:表示背景图片,但是现在的浏览器不支持该属性。
    align:当前行的每个单元格的水平对齐方式,left(默认),center,right
    valign:当前行的每个单元格的垂直对齐方式,top(顶部),middle(中间,默认的),bottom(底部)

td的属性:
    align:单元格中的内容的对齐方式left,center,right,默认是left。
    valign:当前单元格的垂直对齐方式,top(顶部),middle(中间,默认的),bottom(底部)
    colspan:(****)
        合并单元格,横向合并,注意:合并后要将被合并的单元格删除。
    rowspan:(****)
        合并单元格,纵向合并,注意:同上↑。
    bordercolor:表示当前单元格的边框颜色,只对一个单元格起作用。
    width:表示当前单元格所在的列的所有单元格的宽度。
    height:表示当前单元格所在行的所有单元格的高度。
    bgcolor:表示当前单元格的背景颜色。会覆盖在tr或table中设置的背景颜色。
    background:表示当前单元格的背景图片。会覆盖掉在table中设置的背景图片。
    bordercolorlight:表示单元格的亮边框颜色(单元格右边框和下边框的颜色)。
    bordercolordark:表示单元格暗边框的颜色(单元格左边框和上边框的颜色)。

<th></th>:(**)
    通常用来写在表格的首行,作为表头。
    与<td>一样,<td>有什么属性,<th>就有什么属性,写在<tr></tr>中,表示一个单元格,但是<th>有默认的样式,字体加粗,文本居中。

总结表格共有属性:height,align,bordercolor,background。。。


表格的结构:(**)
    用三对标签来实现表格的结构:<thead></thead>,<tbody></tbody>,<tfoot></tfoot>
    其中在一个表格中<tbody></tbody>可以有多个,thead和tfoot只有一个。(*)
目录
相关文章
|
14天前
|
存储 数据采集 JSON
你知道吗?html_table可以提取的不止是表格
`html_table` 是一种强大的工具,不仅用于HTML表格解析,还在现代爬虫技术中发挥重要作用。它可以提取、整合、分析和传输多种类型的关键数据。本文从四个方面探讨其功能:关键数据提取(如财经网站的股票信息)、零散信息整合(如电商网站的产品详情)、数据对比分析(如手机性能参数对比)和数据存储与传输(如转换为CSV/JSON格式)。通过Python代码示例,展示了如何利用代理IP、多线程和自定义请求头提高爬虫效率,实现对复杂网页数据的全面抓取和利用。
32 12
你知道吗?html_table可以提取的不止是表格
|
3月前
|
前端开发 JavaScript C++
震惊!!!html竟然被...... 一篇博客让你从0开始熟悉并掌握html 超详细html笔记 全网独一份
本文是一份超详细的HTML学习笔记,从基础认知开始,介绍了网页的构成、五大浏览器、web标准、HTML/CSS/JavaScript的区别,然后详细讲解了HTML的概念、骨架结构、常用快捷键、注释、标签结构和关系。接着,通过大量实例深入探讨了HTML的各种标签,包括排版标签、文本格式化标签、媒体标签、链接标签、列表标签、表格标签、表单标签、语义化标签和字符实体,旨在帮助读者从0开始熟悉并掌握HTML。
44 2
震惊!!!html竟然被...... 一篇博客让你从0开始熟悉并掌握html 超详细html笔记 全网独一份
|
1月前
|
数据采集 前端开发 数据挖掘
利用 html_table 函数轻松获取网页中的表格数据
本文介绍了如何使用 R 语言中的 `html_table` 函数结合代理 IP 技术,轻松提取网页表格数据并规避反爬机制。通过设置代理和请求头,示例代码展示了如何从 58 同城采集租房信息并保存为 CSV 文件。该方法适用于需要频繁采集数据的场景,确保数据采集的高效和稳定性。
利用 html_table 函数轻松获取网页中的表格数据
|
2月前
|
移动开发 JavaScript 前端开发
html table+css实现可编辑表格的示例代码
html table+css实现可编辑表格的示例代码
105 12
HTML 表格4
HTML 表格标签用于创建和布局表格。主要标签包括:`&lt;table&gt;` 定义表格,`&lt;th&gt;` 定义表头,`&lt;tr&gt;` 定义行,`&lt;td&gt;` 定义单元格,`&lt;caption&gt;` 定义标题,`&lt;colgroup&gt;` 和 `&lt;col&gt;` 定义列属性,`&lt;thead&gt;`、`&lt;tbody&gt;` 和 `&lt;tfoot&gt;` 分别定义表格的页眉、主体和页脚。
HTML 表格2
本示例展示了如何使用 HTML 的 `&lt;table&gt;` 标签和 `border` 属性创建一个带有边框的简单表格。表格包含两行两列,每行有两个单元格,通过设置 `border=&quot;1&quot;` 显示边框。
|
2月前
|
前端开发
HTML 表格1
HTML 表格是用于展示结构化数据的标记语言元素,由 `&lt;table&gt;` 标签定义。表格包含行(`&lt;tr&gt;`)、单元格(`&lt;td&gt;`)和表头(`&lt;th&gt;`)。表格可细分为 `&lt;thead&gt;`(标题部分)和 `&lt;tbody&gt;`(主体部分),支持合并单元格、跨行/跨列操作及 CSS 样式定制。
|
6月前
|
前端开发 UED
使用HTML和CSS创建响应式表格
在网页设计中,表格是一种组织和展示数据的有效方式。本文档将指导你如何使用HTML和CSS来创建一个既美观又响应式的表格,以便在不同设备和屏幕尺寸上都能良好显示。我们将涵盖基础的HTML表格结构,样式美化以及如何实现响应式布局,使得表格内容在小屏设备上也能清晰阅读
249 0
|
3月前
HTML表格
HTML表格
52 4
HTML 表格3
HTML 表格的表头使用 `&lt;th&gt;` 标签定义,通常以粗体居中显示。

热门文章

最新文章