antdtable设置表格⼀个单元格的字体颜⾊_HTML从零开始
——表格及其他标签
⼈类本质上还是视觉动物，所以合理好看的页⾯布局对于⼀个⽹页是否有⾜够⼤的浏览量很重要，这就需要表格的帮助了。
同时，⽹页技术的不断发展，使得HTML
HTML也在不断的引⼊新的标签以适应新的能⼒，这⾥也同时简单介绍⼀些新引⼊的其他标签。
JavaScript章节中表述过的标签，例如<canvas>
<canvas>，由于⽐较复杂，可能会考虑在后⾯单独在列出章节来单独学习。
不过⼀些已经在JavaScript
<svg>（可伸缩
<keygen>（规定⽤于表单的密钥对⽣成器字段，已废弃），<svg>
还有些相对少⽤到或者在新的标准当中已经废弃的标签，⽐如<keygen>
XML的标准，⽤来在互联⽹上书写数学符号和公式的置
mathml数学标记语⾔，是⼀种基于XML
⽮量图形内联标签，使⽤很少），<math>
<math>（mathml
HTML5 教
W3School的HTML5 教
HTML5 教程或者W3School
标语⾔，使⽤量也偏少），我们这⾥都不在继续深⼊了，如果有兴趣，可以看看菜鸟教程的HTML5 教程
程，两者都有⽐较详细的介绍以及参考⼿册。
HTML的最后⼀部分了。
好了，这⼀章节就是HTML
1 表格
row）和列（column
SharePoint产品当中，其传
column）的形式展⽰数据，当然也可以⽤来做页⾯布局，⽐如在微软的SharePoint
表格（table
table）以⾏（row
统页⾯布局就⼤量的使⽤了表格，当然这也是因为该产品主要是以展⽰数据以及⽂档组织为主要功能的，所以⽆可厚⾮。
1.1 <table>，<caption>
<table>是⼀个块级容器标签，所有表格内容都要放在这个标签⾥⾯：
<table>
<
<table>⾥⾯的第⼀个⼦元素，表⽰表格的标题。该元素是可选的：
<caption>
<caption>总是<table>
<
1.2 <thead>、<tbody>、<tfoot>
<tfoot>都是块级容器元素，且都是<table>
<table>的⼀级⼦元素，分别表⽰表头、表体和表尾：
<thead>、<tbody>
<thead>
<tbody>、<tfoot>
table设置内边框<
<tbody>，那么<tfoot>
<tfoot>⼀
<thead>的后⾯。如果使⽤了<tbody>
<tfoot>⼀定在<thead>
<thead>，那么<tbody>
<tbody>和<tfoot>
这三个元素都是可选的。如果使⽤了<thead>
<tbody>后⾯。
定在<tbody>
<tbody>，表⽰连续的多个部分。
⼤型表格内部可以使⽤多个<tbody>
1.3 <colgroup>，<col>
<col>是<colgroup>
<table>的⼀级⼦元素，⽤来包含⼀组列的定义。<col>
<colgroup>的⼦元素，⽤来定义表格的⼀列：
<colgroup>
<colgroup>是<table>
<
上⾯代码表明表格有3列。
<col>不仅是⼀个单独使⽤的标签，没有结束标志，⽽且还是⼀个空元素，没有⼦元素。它的主要作⽤，除了申明表格结构，还可以为表格<col>
附加样式：
<
CSS 针对每个 class
class 设定样式，会对整个表格⽣效，这<colgroup>声明表格有三列，每⼀列有⾃⼰的 class
上⾯代码中，<colgroup>
class，可以使⽤ CSS
⾥我仅仅给出了表格边框：
<col>有⼀个span
span属性，值为正整数，默认为11。如果⼤于11，就表⽰该列的宽度包含连续的多列：
<col>
<
上⾯代码中，表格的表头定义了33列，实际数据有44列。表头的第22列会连续跨22列。
1.4 <tr>
<tbody>、<tfoot>
<thead>、<tbody>
<tr>就放在这些容器元素之中，否则直接放
<tfoot>，那么<tr>
<tr>
<tr>标签表⽰表格的⼀⾏（table row
table row）。如果表格有<thead>
<table>的下⼀级：
在<table>
<
上⾯代码表⽰表格共有33⾏。
1.5 <th>，<td>
<td>是数据单元格：
<th>是标题单元格，<td>
<th>
<th>和<td>
<td>都⽤来定义表格的单元格。其中，<th>
<
<td>：
<th>；第⼆⾏和第三⾏是数据⾏，所以使⽤<td>
上⾯代码中，表格⼀共有三⾏。第⼀⾏是标题⾏，所以使⽤<th>
（1）colspan属性，rowspan属性
rowspan属性设置，前者表⽰单元格跨越的栏数，后者表⽰单元格跨越的⾏单元格会有跨越多⾏或多列的情况，这要通过colspan
colspan属性和rowspan
数。它们的值都是⼀个⾮负整数，默认为11：
<
上⾯代码中，第⼀⾏的第⼀个单元格会跨两列：
（2）headers属性
headers属性：
如果表格很⼤，单元格很多，源码⾥⾯会看不清，哪个单元格对应哪个表头，这时就可以使⽤headers
<
<td>单元格的headers
headers属性就对应这些id id属性的值，因此就能看出来这些单元格对应哪上⾯代码中，标题栏的<th>
<th>设置了id id属性，后⾯的<td>
个标题栏。
headers属性可以是⼀个<th>标签的id id属性的值。由于⼀个单元格可以对应多个标题栏（跨⾏的情况），所以headers
headers
headers属性的值总是对应<th>
空格分隔的字符串，对应多个id id属性的值。
（3）scope属性
scope
<td>标签使⽤，表⽰该<th>
<th>单元格到底是栏的标题，还是列的标题：
scope属性只有<th>
<th>标签⽀持，⼀般不在<td>
<
<th>标签的scope
scope属
col，第⼆⾏和第三⾏的第⼀列是⾏标题，所以<th>
上⾯代码中，第⼀⾏的标题栏都是列标题，所以<th>
<th>的scope
scope属性为col
row。
性为row
scope属性可以取下⾯这些值：
scope
row：该⾏的所有单元格，都与该标题单元格相关。
row
col
col：该列的所有单元格，都与该标题单元格相关。
rowspan属性配合使⽤。
rowgroup
rowgroup：多⾏组成的⼀个⾏组的所有单元格，都与该标题单元格相关，可以与rowspan
colspan属性配合使⽤。
colgroup
colgroup：多列组成的⼀个列组的所有单元格，都与该标题单元格相关，可以与colspan
auto：默认值，表⽰由浏览器⾃⾏决定。
auto
rowgroup属性的例⼦：
下⾯是⼀个colgroup
colgroup属性和rowgroup
<
scope属性
上⾯的例⼦中，列标题“尺⼨”的scope
colgroup，表⽰这个标题单元格对应多列（本例为3列）；⾏标题的scope
scope属性为colgroup
rowgroup，表⽰这个标题单元格对应多⾏（本例为2⾏）：
为rowgroup
2 <dialog>
2.1 基本⽤法
<dialog>标签表⽰⼀个可以关闭的对话框：
<dialog>
<
上⾯就是⼀个最简单的对话框。
open属性：
默认情况下，对话框是隐藏的，不会在⽹页上显⽰。如果要让对话框显⽰，必须加上open
<
Hello HTML！：
上⾯代码会在⽹页显⽰⼀个⽅框，内容是Hello HTML！
<dialog>
HTML 元素：
<dialog>元素⾥⾯，可以放⼊其他 HTML
<
上⾯的对话框⾥⾯，有⼀个输⼊框和提交按钮：
注意，上例中<form>
dialog，这时点击提交按钮，对话框就会消失。但是，表单不会提交到服务器，浏览器会将表单method属性设为dialog
<form>的method
value属性（上例是foo
Submit 按钮的value
foo）。
元素的returnValue
returnValue属性设为 Submit
2.2 JavaScript API
Dialog.showModal()和Dialog.close()
Dialog.close()两个⽅法，⽤于打开/关闭对话框，使⽤如下HTML
HTML：JavaScript API
<dialog>
<dialog>元素的 JavaScript
API 提供Dialog.showModal()
Dialog.close()⽅法，关闭对话框。
开发者可以提供关闭按钮，让其调⽤Dialog.close()
returnValue属性可以读取这个字符串，否
<dialog>接⼝的returnValue
Dialog.close()
Dialog.close()⽅法可以接受⼀个字符串作为参数，⽤于传递信息。<dialog>
value属性：
则returnValue
returnValue属性等于提交按钮的value
CSS 提供了⼀个 Dialog
Dialog 元素Dialog.showModal()⽅法唤起对话框时，会有⼀个透明层，阻⽌⽤户与对话框外部的内容互动。CSS
Dialog.showModal()
::backdrop伪类，⽤于选中这个透明层，因此可以编写样式让透明层变得可见：
的::backdrop
dialog
<dialog>指定了样式，还将对话框的透明层变成了灰⾊透明：
上⾯代码不仅为<dialog>
Dialog.show()⽅法，也能唤起对话框，但是没有透明层，⽤户可以与对话框外部的内容互动。
<dialog>元素还有⼀个Dialog.show()
<dialog>
2.3 事件
<dialog>元素有两个事件，可以监听：
<dialog>
close：对话框关闭时触发
close
esc键关闭对话框时触发
cancel：⽤户按下esc
cancel
如果希望⽤户点击透明层，就关闭对话框，可以⽤下⾯的代码：

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。