HTML 基础的&lt;table&gt; 标签

例

一个简单的 HTML 表格，包含两列两行：

<tr>

<th>Month</th>

<th>Savings</th>

</tr>

<tr>

<td>January</td>

</tr>

</table>

浏览器支持

所有主流浏览器都支持 <table> 标签。

标签定义及使用说明

<table> 标签定义 HTML 表格

一个 HTML 表格包括 <table> 元素，一个或多个 <tr>、<th> 以及 <td> 元素。

<tr> 元素定义表格行，<th> 元素定义表头，<td> 元素定义表格单元。

更复杂的 HTML 表格也可能包括 <caption>、<col>、<colgroup>、<thead>、<tfoot> 以及 <tbody> 元素。

HTML 4.01 与 HTML5之间的差异

在 HTML5 中，仅支持 "border" 属性，并且只允许使用值 "1" 或 ""。

属性

属性	值	描述
align	leftcenterright	HTML5 不支持。HTML 4.01 已废弃。规定表格相对周围元素的对齐方式。
bgcolor	rgb(x,x,x)#xxxxxxcolorname	HTML5 不支持。HTML 4.01 已废弃。规定表格的背景颜色。
border	1""	规定表格单元是否拥有边框。
cellpadding	pixels	HTML5 不支持。规定单元边沿与其内容之间的空白。
cellspacing	pixels	HTML5 不支持。规定单元格之间的空白。
frame	voidabovebelowhsideslhsrhsvsidesboxborder	HTML5 不支持。规定外侧边框的哪个部分是可见的。
rules	nonegroupsrowscolsall	HTML5 不支持。规定内侧边框的哪个部分是可见的。
summary	text	HTML5 不支持。规定表格的摘要。
width	pixels%	HTML5 不支持。规定表格的宽度。

全局属性

<table> 标签支持 HTML 的全局属性。

事件属性

<table> 标签支持 HTML 的事件属性。

如您还有不明白的可以在下面与我留言或是与我探讨QQ群308855039，我们一起飞！

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登录页面</title>
    /*总体的样式*/
    <style>
    	/*盒子样式*/
        #box{
            width: 350px; //宽
            height: 450px; //高
            border: 1px solid black; //边框
            border-radius: 10px; //边框弧度
            font-family: 黑体; //字体
            letter-spacing:8px; //段间距
            word-spacing: 10px; //字间距
            line-height: 40px; //行高
            font-size: 18px; //字大小
            padding: 20px; //内边框
        }
        /*给'注册'赋予样式*/
        .register{
            width:280px ; //宽
            height: 50px; //高
            background-color: skyblue; //背景颜色
            border-radius: 10px; //边框弧度

        }
        /*将所有边框都改变*/
        *{
            border-radius: 5px; 边框弧度
        }
        /*使用class选择器，赋予number宽高和边框*/
        .number{
            width: 185px; //宽
            height: 27px; //高
            border-width: 1px; //边框宽度

        }
        /*id选择器*/
        #two{
            width: 55px; //宽
            border-width: 1px; 边框宽度
        }
        /*id选择器*/
        #phone{
            width: 103px; //宽
        }
        /*class 选择器*/
        .boxs{
            zoom: 75%; //清除浮动
            color: darkgray; //颜色
        }
        /*class选择器*/
        .box_a{
            width: 50px; //宽
            height: 50px; //高
            background-image: url("../image/04.jpg "); //背景图片
            background-repeat: no-repeat; // 是否平铺
            background-size: 50px 25px; //背景尺寸
            position: relative; //定位 相对定位
            left: 310px; //定位后左移
            bottom: 32px; //定位后下移

        }
    </style>
</head>
<body>
<div id="box">
    <h1>请注册</h1>
<p style="color: darkgray">已有帐号?<a href="https://im.qq.com/index">登录</a></p>
<form action="" method="post">
    <label for="name">用户名</label>
    <input type="text" placeholder="请输入用户名" id="name" class="number"> <br>
    <label for="phone">手机号</label>
    <select name="" id="two" class="number">
    <optgroup>
        <option style="" class="">+86</option>
    </optgroup>
    </select>
    <input type="text" placeholder="请输入手机号" id="phone" class="number"> <br>
    <label for="mima">密 码</label>
    <input type="password" placeholder="请输入密码" id="mima" class="number"> <br>
    <label for="mima">验证码</label>
    <input type="password" placeholder="请输入验证码" id="is" class="number">
    <div class="box_a"></div>
    <div class="boxs">
        <input type="radio" id="" class="accept">阅读并接受协议<br>
    </div>
    <input type="submit" value="注册" class="register" >

    </form>
</div>


</body>
</html>
在这里插入图片描述

evExpress官方技术团队预计在11月发布HTML/Markdown 编辑器 (v21.2) 的下一个主要版本，此次更新将包括以下的新特性/功能：

DevExtreme Complete Subscription官方最新版免费下载试用，历史版本下载，在线文档和帮助文件下载-慧都网

表格支持的增强功能

支持表格调整大小

v21.2允许开发人员调整在HTML/Markdown编辑器中显示的表格大小，要启用此新功能，请将tableResizing.enabled属性设置为 true。您还可以使用tableResizing.minColumnWidth和tableResizing.minRowHeight属性限制最小列宽和行高：

Angular

<dx-html-editor>
<dxo-table-resizing
[enabled]="true"
[minColumnWidth]="70"
[minRowHeight]="30">
</dxo-table-resizing>
</dx-html-editor>

Vue

<DxHtmlEditor>
<DxTableResizing
:enabled="true"
:min-column-width="70"
:min-row-height="30"
/>
</DxHtmlEditor>

React

<HtmlEditor>
<TableResizing
enabled={true}
minColumnWidth={70}
minRowHeight={30}
/>
</HtmlEditor>

jQuery

$(function() {
$("#html-editor").dxHtmlEditor({
tableResizing: {
enabled: true,
minColumnWidth: 70,
minRowHeight: 30
}
});
});

表格单元格中的多行文本

在v21.2中，HTML/Markdown 编辑器增加了对表格单元格内多行文本的支持，要添加新行，用户只需按 Enter 键即可。

表格上下文菜单

表格单元格现在包括一个带有常用表格操作命令的上下文菜单，以前这些命令是使用工具栏控件执行的，此上下文菜单的引入允许您为其他控件/命令释放工具栏空间。

要激活上下文菜单，请将tableContextMenu.enabled属性设置为 true。您还可以使用 tableContextMenu.items 数组重新排列或隐藏菜单命令：

Angular

<dx-html-editor>
<dxo-table-context-menu
[enabled]="true">
<dxi-item name="tableProperties"></dxi-item>
<dxi-item name="cellProperties"></dxi-item>
</dxo-table-context-menu>
</dx-html-editor>

Vue

<DxHtmlEditor>
<DxTableContextMenu
:enabled="true">
<DxItem name="tableProperties" />
<DxItem name="cellProperties" />
</DxTableContextMenu>
</DxHtmlEditor>

React

<HtmlEditor>
<TableContextMenu
enabled={true}>
<Item name="tableProperties" />
<Item name="cellProperties" />
</TableContextMenu>
</HtmlEditor>

jQuery

$(function() {
$("#html-editor").dxHtmlEditor({
tableContextMenu: {
enabled: true,
items: [ "tableProperties", "cellProperties" ]
}
});
});

支持表格标题

新版本改进了表格标记处理算法，现在支持表格标题 (<thead>)。

要添加标题行，最终用户可以单击Insert Header Row工具栏按钮，使用以下代码将按钮添加到工具栏：

Angular

<dx-html-editor>
<dxo-toolbar>
<dxi-item name="insertHeaderRow"></dxi-item>
</dxo-toolbar>
</dx-html-editor>

Vue

<DxHtmlEditor>
<DxToolbar>
<DxItem name="insertHeaderRow" />
</DxToolbar>
</DxHtmlEditor>

React

<HtmlEditor>
<Toolbar>
<Item name="insertHeaderRow" />
</Toolbar>
</HtmlEditor>

jQuery

$(function() {
$("#html-editor").dxHtmlEditor({
toolbar: {
items: [
// ...
"insertHeaderRow"
]
}
});
});

或者，用户可以从新引入的表格上下文菜单中选择插入标题行命令。

表格/单元格外观定制

新的弹出对话框允许用户根据要求修改表格和单元格属性。

可以更改下表属性：

外边框（样式、粗细、颜色）
宽度和高度
对齐
填色

单元格支持以下属性：

外边框（样式、粗细、颜色）
宽度和高度
填色
内容对齐（垂直和水平）
填充（垂直和水平）

HTML/Markdown 编辑器将相应的属性和样式保存在输出标记中，并且可以在输入标记中指定它们时对其进行解析。

支持软换行

添加了在块元素（列表、表格、引号）中插入换行符的功能，要开始新行，用户必须使用 Shift + Enter 组合键，将 true 分配给 allowSoftLineBreak 属性以启用此功能：

Angular

<dx-html-editor
[allowSoftLineBreak]="true">
</dx-html-editor>

Vue

<DxHtmlEditor
:allow-soft-line-break="true">
</DxHtmlEditor>

React

<HtmlEditor
allowSoftLineBreak={true}>
</HtmlEditor>

jQuery

$(function() {
$("#html-editor").dxHtmlEditor({
allowSoftLineBreak: true
});
});

DevExtreme

DevExtreme拥有高性能的HTML5 / JavaScript小部件集合，使您可以利用现代Web开发堆栈（包括React，Angular，ASP.NET Core，jQuery，Knockout等）构建交互式的Web应用程序。从Angular和Reac，到ASP.NET Core或Vue，DevExtreme包含全面的高性能和响应式UI小部件集合，可在传统Web和下一代移动应用程序中使用。该套件附带功能齐全的数据网格、交互式图表小部件、数据编辑器等。

在线咨询

上一篇：前端性能优化
下一篇：sublime安装html补全插件

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商

HTML 基础的&amp;lt;table&amp;gt; 标签

表格支持的增强功能

支持软换行

您的项目需求

HTML 基础的<table> 标签