表格标签

表格标签 - 图1<table>表格

属性不要使用标签属性，使用css定义表格样式。

  • border属性 定义表格分割线。
  • cellpadding属性 单元格内边距。
  • cellspacing属性 单元格之间的间距。

<caption>表格标题
<colgroup>给表格的列分组，对表格每列增加样式属性（每一列的共有属性）
<col />空元素，增加每一列的自有属性。
<tr>表格行
<th>table header 行单元格

<td>数据单元格
属性用于合并单元格

  • colspan属性 在一行中的合并指定列数，变成一个单元格
  • rowspan属性 指定两行的单元格，合并成一个单元格

<thead>表格页眉，给表格的行分组
<tbody>表格主体，给表格的行分组
<tfoot>表格页尾，给表格的行分组

  • 关键点1这三个标签是HTML5新增的表格标签，封装表格行，提供有用的表格语义化信息。
  • 关键点2浏览器渲染引擎会使用这三个标签，按照、、的顺序渲染表格。当数据行特别多时，将表头和结尾优先显示，用户体验更好。即使你写乱这三个标签的顺序，浏览器仍然能正确解析表格。
  • 关键点3提供屏幕阅读器的可访问性。

表格标签-UA样式表

  1. /* tables */
  3. table {
  4.   display: table;        //同display: block不同之处就是width默认值
  5.   border-spacing: 2px;
  6.   border-collapse: separate;
  7.   /* XXXldb do we want this if we're border-collapse:collapse ? */
  8.   box-sizing: border-box;
  9.   text-indent: 0;
  10. }
  12. table[align="left"] {
  13.   float: left;
  14. }
  16. table[align="right"] {
  17.   float: right;
  18.   text-align: start;
  19. }
  22. /* border collapse rules */
  24.   /* Set hidden if we have 'frame' or 'rules' attribute.
  25.      Set it on all sides when we do so there's more consistency
  26.      in what authors should expect */
  28.   /* Put this first so 'border' and 'frame' rules can override it. */
  29. table[rules] {
  30.   border-width: thin;
  31.   border-style: hidden;
  32. }
  34.   /* 'border' before 'frame' so 'frame' overrides
  35.       A border with a given value should, of course, pass that value
  36.       as the border-width in pixels -> attr mapping */
  38.   /* :-moz-table-border-nonzero is like [border]:not([border="0"]) except it
  39.      also checks for other zero-like values according to HTML attribute
  40.      parsing rules */
  41. table:-moz-table-border-nonzero {
  42.   border-width: thin;
  43.   border-style: outset;
  44. }
  46. table[frame] {            //frame属性定义表格的边框
  47.   border: thin hidden;
  48. }
  50. /* specificity must beat table:-moz-table-border-nonzero rule above */
  51. table[frame="void"]   { border-style: hidden; }
  52. table[frame="above"]  { border-style: outset hidden hidden hidden; }
  53. table[frame="below"]  { border-style: hidden hidden outset hidden; }
  54. table[frame="lhs"]    { border-style: hidden hidden hidden outset; }
  55. table[frame="rhs"]    { border-style: hidden outset hidden hidden; }
  56. table[frame="hsides"] { border-style: outset hidden; }
  57. table[frame="vsides"] { border-style: hidden outset; }
  58. table[frame="box"],
  59. table[frame="border"] { border-style: outset; }
  62. /* Internal Table Borders */
  64.   /* 'border' cell borders first */
  66. table:-moz-table-border-nonzero > * > tr > td,
  67. table:-moz-table-border-nonzero > * > tr > th,
  68. table:-moz-table-border-nonzero > * > td,
  69. table:-moz-table-border-nonzero > * > th,
  70. table:-moz-table-border-nonzero > td,
  71. table:-moz-table-border-nonzero > th
  72. {
  73.   border-width: thin;
  74.   border-style: inset;
  75. }
  77. /* collapse only if rules are really specified */
  78. table[rules]:not([rules="none"], [rules=""]) {
  79.   border-collapse: collapse;
  80. }
  82. /* only specified rules override 'border' settings
  83.   (increased specificity to achieve this) */
  84. table[rules]:not([rules=""])> tr > td,
  85. table[rules]:not([rules=""])> * > tr > td,
  86. table[rules]:not([rules=""])> tr > th,
  87. table[rules]:not([rules=""])> * > tr > th,
  88. table[rules]:not([rules=""])> td,
  89. table[rules]:not([rules=""])> th
  90. {
  91.   border-width: thin;
  92.   border-style: none;
  93. }
  96. table[rules][rules="none"]  > tr > td,
  97. table[rules][rules="none"] > * > tr > td,
  98. table[rules][rules="none"] > tr > th,
  99. table[rules][rules="none"] > * > tr > th,
  100. table[rules][rules="none"] > td,
  101. table[rules][rules="none"] > th
  102. {
  103.   border-width: thin;
  104.   border-style: none;
  105. }
  107. table[rules][rules="all"] > tr > td,
  108. table[rules][rules="all"] > * > tr > td,
  109. table[rules][rules="all"] > tr > th,
  110. table[rules][rules="all"] > * > tr > th,
  111. table[rules][rules="all"] > td,
  112. table[rules][rules="all"] > th
  113. {
  114.   border-width: thin;
  115.   border-style: solid;
  116. }
  118. table[rules][rules="rows"] > tr,
  119. table[rules][rules="rows"] > * > tr {
  120.   border-block-start-width: thin;
  121.   border-block-end-width: thin;
  122.   border-block-start-style: solid;
  123.   border-block-end-style: solid;
  124. }
  127. table[rules][rules="cols"] > tr > td,
  128. table[rules][rules="cols"] > * > tr > td,
  129. table[rules][rules="cols"] > tr > th,
  130. table[rules][rules="cols"] > * > tr > th {
  131.   border-inline-start-width: thin;
  132.   border-inline-end-width: thin;
  133.   border-inline-start-style: solid;
  134.   border-inline-end-style: solid;
  135. }
  137. table[rules][rules="groups"] > colgroup {
  138.   border-inline-start-width: thin;
  139.   border-inline-end-width: thin;
  140.   border-inline-start-style: solid;
  141.   border-inline-end-style: solid;
  142. }
  143. table[rules][rules="groups"] > tfoot,
  144. table[rules][rules="groups"] > thead,
  145. table[rules][rules="groups"] > tbody {
  146.   border-block-start-width: thin;
  147.   border-block-end-width: thin;
  148.   border-block-start-style: solid;
  149.   border-block-start-style: solid;
  150. }
  153. /* caption inherits from table not table-outer */
  154. caption {
  155.   display: table-caption;
  156.   text-align: center;
  157. }
  159. table[align="center"] > caption {
  160.   margin-inline-start: auto;
  161.   margin-inline-end: auto;
  162. }
  164. table[align="center"] > caption[align="left"]:dir(ltr) {
  165.   margin-inline-end: 0;
  166. }
  167. table[align="center"] > caption[align="left"]:dir(rtl) {
  168.   margin-inline-start: 0;
  169. }
  171. table[align="center"] > caption[align="right"]:dir(ltr) {
  172.   margin-inline-start: 0;
  173. }
  174. table[align="center"] > caption[align="right"]:dir(rtl) {
  175.   margin-inline-end: 0;
  176. }
  178. tr {
  179.   display: table-row;
  180.   vertical-align: inherit;
  181. }
  183. col {
  184.   display: table-column;
  185. }
  187. colgroup {
  188.   display: table-column-group;
  189. }
  191. tbody {
  192.   display: table-row-group;
  193.   vertical-align: middle;
  194. }
  196. thead {
  197.   display: table-header-group;
  198.   vertical-align: middle;
  199. }
  201. tfoot {
  202.   display: table-footer-group;
  203.   vertical-align: middle;
  204. }
  206. /* for XHTML tables without tbody */
  207. table > tr {
  208.   vertical-align: middle;
  209. }
  211. td {
  212.   display: table-cell;    //行内块元素
  213.   vertical-align: inherit;
  214.   text-align: unset;
  215.   padding: 1px;
  216. }
  218. th {
  219.   display: table-cell;
  220.   vertical-align: inherit;
  221.   font-weight: bold;
  222.   padding: 1px;
  223. }
  225. tr > form:-moz-is-html, tbody > form:-moz-is-html,
  226. thead > form:-moz-is-html, tfoot > form:-moz-is-html,
  227. table > form:-moz-is-html {
  228.   /* Important: don't show these forms in HTML */
  229.   display: none !important;
  230. }
  232. table[bordercolor] > tbody,
  233. table[bordercolor] > thead,
  234. table[bordercolor] > tfoot,
  235. table[bordercolor] > col,
  236. table[bordercolor] > colgroup,
  237. table[bordercolor] > tr,
  238. table[bordercolor] > * > tr,
  239. table[bordercolor] > tr > td,
  240. table[bordercolor] > * > tr > td,
  241. table[bordercolor] > tr > th,
  242. table[bordercolor] > * > tr > th {
  243.   border-color: inherit;
  244. }