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> 標簽