笔记 - 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只有一个。(*)
目录
相关文章
|
2月前
|
前端开发 UED
使用HTML和CSS创建响应式表格
在网页设计中,表格是一种组织和展示数据的有效方式。本文档将指导你如何使用HTML和CSS来创建一个既美观又响应式的表格,以便在不同设备和屏幕尺寸上都能良好显示。我们将涵盖基础的HTML表格结构,样式美化以及如何实现响应式布局,使得表格内容在小屏设备上也能清晰阅读
99 0
|
11天前
|
前端开发 程序员
【前端web入门第二天】01 html语法实现列表与表格_合并单元格
本文介绍了HTML中的列表与表格的使用方法。列表包括无序列表(`&lt;ul&gt;`嵌套`&lt;li&gt;`)、有序列表(`&lt;ol&gt;`嵌套`&lt;li&gt;`)和定义列表(`&lt;dl&gt;`嵌套`&lt;dt&gt;`和`&lt;dd&gt;`)。
38 19
|
7天前
|
前端开发 JavaScript
用最少的代码实现一个HTML可交互表格
该HTML页面展示了一个可交互的表格,用户可以通过点击表格行来高亮显示所选行。使用了基本的`&lt;table&gt;`结构,并通过CSS设置了表格样式及行悬停效果。JavaScript函数`toggleSelect`实现了行选中的切换功能。
|
1月前
|
前端开发
HTML+CSS基础知识(6)背景的设置、表格的设计、表单的设计和框架集
这篇文章详细介绍了如何在HTML和CSS中设置背景、设计表格、创建表单以及使用框架集,并通过代码示例和测试结果展示了具体的实现方法和效果。
HTML+CSS基础知识(6)背景的设置、表格的设计、表单的设计和框架集
|
1月前
Markdown使用HTML语法实现复杂表格
Markdown使用HTML语法实现复杂表格
72 1
|
1月前
|
JavaScript 前端开发
基于Vue实现具有固定表头、合并单元格的Html表格
本文介绍了如何在Vue框架中创建一个具有固定表头和合并单元格功能的HTML表格,通过CSS的`position: sticky`属性实现表头固定,并通过设置`rowspan`和`colspan`属性来实现单元格合并。
14 0
基于Vue实现具有固定表头、合并单元格的Html表格
|
30天前
|
前端开发
探索HTML表格的奥秘:学会使用 <table>标签创建精美表格
探索HTML表格的奥秘:学会使用 <table>标签创建精美表格
|
1月前
Html 表格 在线转 Markdown
Html 表格 在线转 Markdown
27 0
|
2月前
HTML【详解】表格 table 标签(table的属性,语义化表格,简易表格,合并单元格)
HTML【详解】表格 table 标签(table的属性,语义化表格,简易表格,合并单元格)
116 0
HTML【详解】表格 table 标签(table的属性,语义化表格,简易表格,合并单元格)
|
3月前
HTML表格使用指南
HTML表格使用指南