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;


相关文章
|
15天前
|
Web App开发 存储 移动开发
前端基础(十七)_HTML5新特性
本文概述了HTML5的关键新特性,包括canvas图形绘制、多媒体的`video`和`audio`元素、本地存储功能、语义化标签(如`header`、`footer`、`nav`等)及其新增表单控件和属性(如`url`、`email`、`date`类型输入框等)。这些改进增强了网页的功能性和用户体验。
17 1
前端基础(十七)_HTML5新特性
|
1天前
|
移动开发 HTML5
HTML5标签的类型
HTML5标签的类型。
17 5
|
3天前
|
前端开发 JavaScript 数据安全/隐私保护
【前端基础篇】HTML零基础速通2
【前端基础篇】HTML零基础速通
7 2
|
3天前
|
Web App开发 移动开发 前端开发
【前端基础篇】HTML零基础速通1
【前端基础篇】HTML零基础速通
11 1
|
15天前
|
前端开发 BI
前端基础(十)_标签分类(行级标签、块级标签、行块标签)
本文阐述了HTML标签的分类,包括行级标签、块级标签和行块标签,并展示了如何使用CSS的display属性实现标签类型之间的转换。
36 3
|
14天前
|
前端开发
前端基础(二)_HTML常用标签(块级标签、行级标签、行块级标签)
本文详细介绍了HTML中的常用标签,包括块级标签(如`h1`至`h6`、`p`、`div`等)、行级标签(如`span`、`b`、`strong`、`i`、`em`、`sub`、`sup`、`del`、`a`等),以及行块级标签(如`img`)。文章解释了这些标签的用途、特点和基本用法,并通过示例代码展示了如何在HTML文档中使用它们。
58 1
|
15天前
|
移动开发 开发者 UED
HTML5中video标签controlslist属性的使用方法
`controlsList`属性为开发者提供了更多控制HTML5视频播放器行为的能力,让视频内容的集成更加灵活和符合需求。通过精心设计的控制列表,可以提升用户体验,同时保持内容的安全性和专业性。这种细节的控制和定制能力是现代Web开发的一个重要方面,反映了HTML5对开发者和内容创作者需求的响应。
23 1
|
15天前
|
存储 JavaScript Java
使用NekoHTML解析HTML并提取META标签内容
关于NekoHTML的代码样例,这里提供一个简单的示例,用于展示如何使用NekoHTML来解析HTML文档并提取其中的信息。请注意,由于NekoHTML的具体实现和API可能会随着版本更新而有所变化,以下代码仅供参考。 ### 示例:使用NekoHTML解析HTML并提取META标签内容 ```java import org.cyberneko.html.parsers.DOMParser; import org.w3c.dom.Document; import org.w3c.dom.Element; import org.w3c.dom.NodeList; import org.xml
|
15天前
|
XML JavaScript Java
NekoHTML 是一个基于Java的HTML扫描器和标签补全器
**NekoHTML** 是一个基于Java的HTML扫描器和标签补全器(tag balancer),由J. Andrew Clark开发。它主要用于解析HTML文档,并能够“修正”许多在编写HTML文档过程中常犯的错误,如增补缺失的父元素、自动用结束标签关闭相应的元素,以及处理不匹配的内嵌元素标签等。这使得程序能够以标准的XML接口来访问HTML文档中的信息。 ### NekoHTML的主要特点包括: 1. **错误修正**:能够自动修正HTML中的常见错误,如未闭合的标签等。 2. **DOM树生成**:将HTML源代码转化为DOM(Document Object Model)结构,便
|
16天前
|
JavaScript 前端开发
react字符串转为dom标签,类似于Vue中的v-html
本文介绍了在React中将字符串转换为DOM标签的方法,类似于Vue中的`v-html`指令,通过使用`dangerouslySetInnerHTML`属性实现。
34 0
react字符串转为dom标签,类似于Vue中的v-html