包含html5table的词条

小程序：扫一扫查出行
【扫一扫了解最新限行尾号】
复制小程序

html5 table怎么美化

根据自己的需要，在默认样式的基础上，利用CSS3对表格进行美化，比如添加颜色，或者利用border-radius这个CSS3属性设置table的圆角弧度。

html5如何控制table宽度？

给table标签添加样式，设置width即可。如行内样式的写法： table style="width:500px;"/table

html5 如何控制table中文字的位置

一般table如:

table id="tb1"

td文字1/td

tddiv文字2/div/td

/tr

/table

HTML中td标签有两个常用的属性可以控制内容位置

valign

控制垂直位置, align 属性规定单元格中内容的水平对齐方式。

值描述

top 对内容进行上对齐。

middle 对内容进行居中对齐（默认值）。

bottom 对内容进行下对齐。

baseline 与基线对齐。

align

属性规定单元格中内容的水平对齐方式。

值描述

left 左对齐内容（默认值）。

right 右对齐内容。

center 居中对齐内容。

justify 对行进行伸展，这样每行都可以有相等的长度（就像在报纸和杂志中）。

char 将内容对准指定字符。

例如要让"文字1"居中代码如下:

table id="tb1"

td valign="middle" align="center" 文字1/td

tddiv文字2/div/td

/tr

/table

如果用CSS可以这样:

style type="text/css"

#tb1 td.txt1{ /** 文字1居中 */

vertical-align: middle; /**垂直居中*/

text-align:center; /**水平居中 */

}

#tb1 td.txt2 div{ /**文字2*/

text-align:right; /**水平右对齐 */

}

/style

table id="tb1"

td class="txt1"文字1/td

td class="txt2"div文字2/div/td

/tr

/table

另外实际应用中还有更多方法,例如position或者float等CSS方法.

参考网址:

html5，table表格

你好！

style

table {

font-family: arial, 宋体, sans-serif;

border-spacing: 0;

border-collapse: collapse;

}

tbody {

display: table-row-group;

vertical-align: middle;

border-color: inherit;

}

td,

th {

display: table-cell;

vertical-align: inherit;

}

table th,

table td {

padding: 2px 10px;

font-size: 12px;

line-height: 22px;

height: 22px;

border: 1px solid #e6e6e6;

}

table th {

border-bottom: 1px solid #e6e6e6;

text-align: left;

font-weight: 700;

height: 23px;

background-color: #f8f8f8;

}

table.table-view {

margin: 5px 0;

border-collapse: collapse;

word-wrap: break-word;

word-break: break-all;

font-size: 12px;

line-height: 22px;

color: #000;

}

caption {

display: table-caption;

text-align: -webkit-center;

}

table caption {

font-weight: 700;

padding: 10px 0;

padding: 8px 0 9px;

font-size: 14px;

}

table a {

color: #136ec2;

text-decoration: none;

}

/style

table log-set-param="table_view" class="table-view log-set-param"

caption金满贯/caption

tbody

th height="0" align="left"

div class="para" label-module="para"网球奖项/div

div class="para" label-module="para"（英文）/div

/th

th height="0" align="left"

div class="para" label-module="para"网球奖项/div

div class="para" label-module="para"（中文）/div

/th

th分类/th

th height="0" align="left"信息/th

/tr

td width="100" height="0" align="left" valign="center" rowspan="2"bGolden Slam/b/td

td width="87" height="0" align="left" valign="center" rowspan="2"

div class="para" label-module="para"a target="_blank" href="/item/%E9%87%91%E6%BB%A1%E8%B4%AF"b金满贯/b/a/div

div class="para" label-module="para"b★★★★/b/div

/td

td width="91" align="left" valign="center"年度金满贯/td

td valign="top" align="left" width="354"

div class="para" label-module="para"（年度金满贯：是指一位选手在一个赛季里（一年）同时获得所有四大满贯赛事的冠军和a target="_blank" href="/item/%E5%A4%8F%E5%AD%A3%E5%A5%A5%E6%9E%97%E5%8C%B9%E5%85%8B%E8%BF%90%E5%8A%A8%E4%BC%9A"夏季奥林匹克运动会/a网球项目金牌。）/div

/td

/tr

td width="91" align="left" valign="center"职业金满贯/td

td width="354" align="left" valign="center"（职业金满贯：是指一位选手在职业生涯中非连续夺得所有四大满贯赛事的冠军和a target="_blank" href="/item/%E5%A4%8F%E5%AD%A3%E5%A5%A5%E6%9E%97%E5%8C%B9%E5%85%8B%E8%BF%90%E5%8A%A8%E4%BC%9A"夏季奥林匹克运动会/a网球项目金牌。）/td

/tr

/tbody

/table

希望对你有帮助！

HTML5-表格

HTML ul 元素 ( 或 HTML 无序列表元素）代表多项的无序列表，即无数值排序项的集合，且它们在列表中的顺序是没有意义的。通常情况下，无序列表项的头部可以是几种形式，如一个点，一个圆形或方形。头部的风格并不是在页面的 HTML 描述定义, 但在其相关的 CSS 可以用 list-style-type 属性。 ul 标签需要和 li 标签结合使用。

属性说明：

HTML ol 元素表示多个有序列表项，通常渲染为有带编号的列表。

属性说明:

HTML 元素（或 HTML 描述列表元素）是一个包含术语定义以及描述的列表，通常用于展示词汇表或者元数据 ( 键-值对列表 )。

HTML 的 table 元素表示表格数据 — 即通过二维数据表表示的信息。

? 属性：(写在开头标签的里面的单词就叫做该元素的属性)

浏览器运行效果如下：

把上面表格中数字为 1 和 2 的单元格进行合并，数字为 3 和 6 的单元格进行合并。

数字为 1 和 2 的单元格分别在不同的列中所以是进行了列合并，因为只需要合并两个单元格所以 colspan 的值为 2，列合并只需要在数字为 1 的单元格中添加属性 colspan，然后把数字为 2 的单元格删除，列合并就完成了。

数字为 1 和 2 的单元格分别在不同的行中所以是进行了行合并，因为只需要合并两个单元格所以 rowspan 的值为 2，行合并只需要在数字为 3 的单元格中添加属性 rowspan，然后把数字为 6 的单元格删除，行合并就完成了。

浏览器运行效果如下：