17、前端开发:HTML知识补充——表格标签

简介: 17、前端开发:HTML知识补充——表格标签

1、table标签

块元素


tr表示表格中的一行,有几个tr就有几行


td表示一个单元格,有几个td就有几个单元格


rowspan  纵向合并单元格


colspan  横向合并单元格


举例:三行两列表格


<table>
    <tr>
        <td>A1</td>
        <td rowspan="2">B1</td>
    </tr>
    <tr>
        <td>A2</td>
    </tr>
    <tr>
        <td colspan="2">A3</td>
    </tr>
</table>


2、长表格

可以将一个表格分成三个部分:


       头部        thead


       主体        tbody


       底部        tfoot


th表示头部的单元格,加粗居中效果

1.gif

3、表格样式

border-spacing  指定边框之间的距离


border-collapse:collapse;设置边框的合并


/*设置表格偶数行背景*/


tbody>tr:nth-child(even/2n){
    background-color:#bfa
}

如果表格中没有使用tbody而直接使用tr,那么浏览器会自动创建一个tbody,并且将tr全都放到tbody中,tr不是table的子元素。


默认情况下元素在td中是垂直居中的,可以通过vertical-align来修改


将box1水平垂直居中于box2的方法


       display:table-cell;/*将元素设置为单元格*/


       margin:0 auto;


       vertical-align:middle;


相关文章
|
5天前
|
移动开发 JavaScript 前端开发
html table+css实现可编辑表格的示例代码
html table+css实现可编辑表格的示例代码
|
12天前
|
移动开发 编解码 UED
除了 `<audio>` 和 `<video>` 标签,HTML5 还支持哪些多媒体格式?
【10月更文挑战第19天】HTML5对多种多媒体格式的支持,为网页开发者提供了丰富的选择,能够更好地满足不同类型多媒体内容在网页中的展示和交互需求,提升了网页的用户体验和多媒体应用的多样性。
|
15天前
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;` 分别定义表格的页眉、主体和页脚。
|
15天前
HTML 表格2
本示例展示了如何使用 HTML 的 `&lt;table&gt;` 标签和 `border` 属性创建一个带有边框的简单表格。表格包含两行两列,每行有两个单元格,通过设置 `border=&quot;1&quot;` 显示边框。
|
15天前
|
前端开发
HTML 表格1
HTML 表格是用于展示结构化数据的标记语言元素,由 `&lt;table&gt;` 标签定义。表格包含行(`&lt;tr&gt;`)、单元格(`&lt;td&gt;`)和表头(`&lt;th&gt;`)。表格可细分为 `&lt;thead&gt;`(标题部分)和 `&lt;tbody&gt;`(主体部分),支持合并单元格、跨行/跨列操作及 CSS 样式定制。
|
1月前
|
XML 前端开发 JavaScript
前端开发进阶:从HTML到React.js
【10月更文挑战第9天】前端开发进阶:从HTML到React.js
|
1月前
HTML表格
HTML表格
42 4
|
12天前
|
存储 移动开发 前端开发
|
15天前
HTML 表格3
HTML 表格的表头使用 `&lt;th&gt;` 标签定义,通常以粗体居中显示。
|
1月前
|
前端开发
【HTML】img标签和超链接标签
【HTML】img标签和超链接标签
39 2