- 07.CSS表格
- html5表格标签
- 表格
- 2019-01-09第三天
- 2015年11月5日
- 2018-11-28
- 第5单元 个性月历
- 零基础Web前端开发（5）
- html基础
- HTML基础
-
表格常用属性
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <style type="text/css"> caption{ caption-side: bottom; } table,th,td{ border-width: 1px; border-color: darkgreen; border-style: solid; border-collapse: collapse; empty-cells: show; text-align: left; vertical-align: top; } th,td{ width: 10%; height: 50px; } </style> </head> <body> <table> <caption>标题</caption> <th>列1</th> <th>列2</th> <th>列3</th> <tr class="tr01"> <td>行1</td> <td>行2</td> <td /> </tr> </table> </body> </html> +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ 01.caption-side:标题位置,默认为top; 02.border-width:边线宽度,默认0; 03.border-color:边线颜色,默认透明; 04.border-style:边线风格,默认none; 05.border-collapse:边线合并,默认separate; 因table,th,td均有边线,故分离则展示两条边框; 06.empty-cells:空白单元格,默认不显示hide; 07.text-align:文本x方向对齐方式,th默认center,td默认left; 08.vertical-align:文本y方向对齐方式,默认center; 09.width:宽度,默认auto; 10.height:高度,默认auto.
运行图片-
表格示例
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <style type="text/css"> #table01,#table01 th,#table01 td{ font-family: "微软雅黑" sans-serif; border: 1.2px solid #98bf21; border-collapse: collapse; empty-cells: show; } #table01 th{ background-color: #A7C942; color: white; font-size: 1.2em; width: 120px; height: 40px; text-align: left; padding-left: 5px; } #table01 td{ height: 30px; padding-left: 5px; } .tr02{ background-color: #EAF2D3; } </style> </head> <body> <table id="table01"> <th>列1</th> <th>列2</th> <th>列3</th> <tr class="tr01"> <td>行1</td> <td>12</td> <td>13</td> </tr> <tr class="tr02"> <td>行2</td> <td>22</td> <td>23</td> </tr> <tr class="tr01"> <td>行3</td> <td>32</td> <td>33</td> </tr> <tr class="tr02"> <td>行4</td> <td>42</td> <td>43</td> </tr> <tr class="tr01"> <td>行5</td> <td>52</td> <td>53</td> </tr> <tr class="tr02"> <td>行6</td> <td>62</td> <td>63</td> </tr> </table> </body> </html>
运行图片相关文章
07.CSS表格
表格常用属性 运行图片 表格示例 运行图片
html5表格标签
表格 格式： 表格标签： ————定义表格 ———— 定义表格标题。 ———— 定义表格的表头。 ———— ...
表格
基本表格 带边框表格 鼠标悬停表格 条纹状表格 紧缩型表格 ...
2019-01-09第三天
表格 有表格线 没有表格线？ 水平表格和垂直表格如何设计出来的？
2015年11月5日
表格标签：table 表格thead 表格头tbody 表格主体tfoot 表格尾tr 表格行th 元素定义表头t...
2018-11-28
表格 表格 长表格 表格的布局 完善clearfix 表单 模拟后台服务器 表格
第5单元 个性月历
创建表格 输入表格 调整与修必表格 美化表格
零基础Web前端开发（5）
HTML表格概述 表格的基本结构 表格的基本标签有标签 （表格）， 标签（表格行）, 标签（表格单元格）。 标签和...
html基础
HTML表格 定义表格的标签 定义表格若干行 定义表格的表头 定义表格的若干单元格 border 表格属性 合并...
HTML基础
HTML表格 定义表格的标签 定义表格若干行 定义表格的表头 定义表格的若干单元格 border 表格属性 合并...
本文标题：07.CSS表格
本文链接：https://www.haomeiwen.com/subject/iafpfxtx.html
深度阅读
- 您也可以注册成为美文阅读网的作者，发表您的原创作品、分享您的心情！
网友评论