html与表格（table）相关的属性

<table> 标签定义 HTML 表格。简单的 HTML 表格由 table 元素以及一个或多个 tr、th 或 td 元素组成。tr 元素定义表格行，th 元素定义表头，td 元素定义表格单元。更复杂的 HTML 表格也可能包括 caption、col、colgroup、thead、tfoot 以及 tbody 元素。

table标签除了具有html元素中通用的属性外，还含有自己的属性，常用属性如下：

bgcolor：规定表格边框的宽度。

cellpadding：规定单元边沿与其内容之间的空白

cellspacing：规定单元格之间的空白。

frame：规定外侧边框的哪个部分是可见的。

rules：规定内侧边框的哪个部分是可见的。

summary：规定表格的摘要。

width：规定表格的宽度。

1、<thead> 标签

<thead> 标签定义表格的表头。该标签用于组合 HTML 表格的表头内容。thead 元素应该与 tbody 和 tfoot 元素结合起来使用。tbody 元素用于对 HTML 表格中的主体内容进行分组，而 tfoot 元素用于对 HTML 表格中的表注（页脚）内容进行分组。在默认情况下这些元素不会影响到表格的布局。不过，您可以使用 CSS 使这些元素改变表格的外观。

描述：thead、tfoot 以及 tbody 元素使您有能力对表格中的行进行分组。当您创建某个表格时，您也许希望拥有一个标题行，一些带有数据的行，以及位于底部的一个总计行。这种划分使浏览器有能力支持独立于表格标题和页脚的表格正文滚动。当长的表格被打印时，表格的表头和页脚可被打印在包含表格数据的每张页面上。

常用属性如下：

align：定义 thead 元素中内容的对齐方式。

char：规定根据哪个字符来进行文本对齐。

charoff：规定第一个对齐字符的偏移量。

valign：规定 thead 元素中内容的垂直对齐方式。

注意：<thead> 内部必须拥有 <tr> 标签！

源码如下：

<table border="1">
  <thead>
    <tr>
      <th>Month</th>
      <th>Savings</th>
    </tr>
  </thead>

  <tfoot>
    <tr>
      <td>Sum</td>
      <td>$180</td>
    </tr>
  </tfoot>

  <tbody>
    <tr>
      <td>January</td>
      <td>$100</td>
    </tr>
    <tr>
      <td>February</td>
      <td>$80</td>
    </tr>
  </tbody>
</table>

2、<tbody> 标签

<tbody> 标签表格主体（正文）。该标签用于组合 HTML 表格的主体内容。

常用属性如下：

align：定义 thead 元素中内容的对齐方式。

char：规定根据哪个字符来进行文本对齐。

charoff：规定第一个对齐字符的偏移量。

valign：规定 thead 元素中内容的垂直对齐方式。

<table border="1">
  <thead>
    <tr>
      <th>Month</th>
      <th>Savings</th>
    </tr>
  </thead>

  <tfoot>
    <tr>
      <td>Sum</td>
      <td>$180</td>
    </tr>
  </tfoot>

  <tbody>
    <tr>
      <td>January</td>
      <td>$100</td>
    </tr>
    <tr>
      <td>February</td>
      <td>$80</td>
    </tr>
  </tbody>
</table>

3、<tfoot> 标签

<tfoot> 标签定义表格的页脚（脚注或表注）。该标签用于组合 HTML 表格中的表注内容。

常用属性如下：

align：定义 thead 元素中内容的对齐方式。

char：规定根据哪个字符来进行文本对齐。

charoff：规定第一个对齐字符的偏移量。

valign：规定 thead 元素中内容的垂直对齐方式。

<table border="1">
  <thead>
    <tr>
      <th>Month</th>
      <th>Savings</th>
    </tr>
  </thead>

  <tfoot>
    <tr>
      <td>Sum</td>
      <td>$180</td>
    </tr>
  </tfoot>

  <tbody>
    <tr>
      <td>January</td>
      <td>$100</td>
    </tr>
    <tr>
      <td>February</td>
      <td>$80</td>
    </tr>
  </tbody>
</table>

4、<tr> 标签

<tr> 标签定义 HTML 表格中的行。tr 元素包含一个或多个 th 或 td 元素。

常用属性如下：

align：定义 thead 元素中内容的对齐方式。

char：规定根据哪个字符来进行文本对齐。

charoff：规定第一个对齐字符的偏移量。

valign：规定 thead 元素中内容的垂直对齐方式。

<table border="1">
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>January</td>
    <td>$100</td>
  </tr>
</table>

5、<th> 标签

<th> 标签定义表格内的表头单元格。

HTML 表单中有两种类型的单元格：

  • 表头单元格 - 包含表头信息（由 th 元素创建）
  • 标准单元格 - 包含数据（由 td 元素创建）

th 元素内部的文本通常会呈现为居中的粗体文本，而 td 元素内的文本通常是左对齐的普通文本。

常用属性如下：

align：规定单元格内容的水平对齐方式。

char：规定根据哪个字符来进行文本对齐。

charoff：规定第一个对齐字符的偏移量。

colspan：设置单元格可横跨的列数。

rowspan：规定单元格可横跨的行数。

valign：规定单元格内容的垂直排列方式。

6、<td> 标签

定义 HTML 表格中的标准单元格。

常用属性如下：

align：规定单元格内容的水平对齐方式。

char：规定根据哪个字符来进行文本对齐。

charoff：规定第一个对齐字符的偏移量。

colspan：设置单元格可横跨的列数。

rowspan：规定单元格可横跨的行数。

valign：规定单元格内容的垂直排列方式。

综合实例：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Book List</title>
<style type="text/css">
table {
    background-color: #FFF;
    border: none;
    color: #565;
    font: 12px arial;
}

table caption {
    font-size: 24px;
    border-bottom: 2px solid #B3DE94;
    border-top: 2px solid #B3DE94;
}

table, td, th {
    margin: 0;
    padding: 0;
    vertical-align: middle;
    text-align:left;
}

tbody td, tbody th {
    background-color: #DFC;
    border-bottom: 2px solid #B3DE94;
    border-top: 3px solid #FFFFFF;
    padding: 9px;
}

tfoot td, tfoot th {
    font-weight: bold;
    padding: 4px 8px 6px 9px;
    text-align:center;
}

thead th {
    font-size: 14px;
    font-weight: bold;
    line-height: 19px;
    padding: 0 8px 2px;
    text-align:center;
}

tbody tr.odd th,tbody tr.odd td { /*odd就是偶数行*/
    background-color: #CEA;
    border-bottom: 2px solid #67BD2A;
}

td+td+td, /*第三个td以及之后的td元素*/
col.price{ /*类样式*/
    text-align:right;
}

tbody tr:hover td, tbody tr:hover th { /*tr也有hover样式*/
    background-color: #8b7;
    color:#fff;
}

</style>
</head>

<body>
        <table summary="book list">
            <caption>Book List</caption> <!-- caption 标签必须紧随 table 标签之后。您只能对每个表格定义一个标题。通常这个标题会被居中于表格之上。 -->
            <col></col><col></col><col></col><col class="price" align="right"></col><col></col>
            <thead>
                <tr>
                    <th >Title</th>
                    <th >ID</th>

                    <th >Country</th>
                    <th >Price</th>
                    <th >Download</th>
                </tr>
            </thead>
            <tbody>
                <tr >
                    <th >Tom</th>
                    <td>1213456</td>

                    <td>Germany</td>
                    <td>$3.12</td>
                    <td>Download</td>
                </tr>
                <tr class="odd">
                    <th >Chance</th>
                    <td>1213457</td>

                    <td>Germany</td>
                    <td>$123.34</td>
                    <td>Download</td>
                </tr>
                <tr >
                    <th >John</th>
                    <td>1213458</td>

                    <td>Germany</td>
                    <td>$34.37</td>
                    <td>Download</td>
                </tr>
                <tr class="odd">
                    <th >oKathleen</th>
                    <td>1213459</td>
                    <td>Germany</td>
                    <td>$23.67</td>
                    <td>Download</td>
                </tr>
                </tbody>
            <tfoot>
                <tr>
                    <th >Total</th>
                    <td colspan="4">4 books</td>
                </tr>
            </tfoot>
</table>
</body>

</html>
时间： 2024-10-09 13:19:47

html与表格（table）相关的属性的相关文章

关于table相关的属性，CSS样式

table属性: 1:border没有设置的话表格没有边框 2:cellpadding单元格和内容的空白 3:cellspacing单元格和单元格之间的空白 4:frame规定外边框可见性 5:rules规定内边框可见性 6:规定内边框可见性 tableCSS样式: 表格 Table 属性 版本 继承性 描述 table-layout CSS2 无 设置或检索表格的布局算法 border-collapse CSS2 有 设置或检索表格的行和单元格的边是合并在一起还是按照标准的HTML样式分开 b

js的table表格对象的rows属性用法简单介绍

js的table表格对象的rows属性用法简单介绍:rows作用正如其拼写一样,是用来获取一个行的集合,也就是表格中行的集合.代码如下: <!DOCTYPE html><html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>蚂蚁部

CSS属性之表格(Table)

CSS属性之表格(Table) HTML为表格定义了3个元素用于对行进行分组,它们是 thead (表头).tbody (表格主体).tfoot (脚注). 在HTML4中文档结构中的 tfoot 必须出现在 tbody之前,HTML5去掉了这个限制. 如果在源代码中没有写分组元素时,浏览器会自动创建 tbody ,所以选择器 table > tr 总是无效,因为中间有 tbody. 如果表格主体中的每一行都是以 td 元素开头,那这些 th 就是行标题. colgroup 与 col <co

表格Table和表单元素

1.相对路径与绝对路径 绝对路径 指带域名的文件的完整路径和磁盘中指定文件的全部路径 网址(网站的尾部)–a标签用的比较多 <img src="D:/2019/9/1.jpg" > <a href="http://www.baidu.com">百度一下</a> 相对路径 是指在同一个文件夹下,通过一个参考点来找到其他文件 返回上一级 ../ 同级之间直接写文件名 下一级用 / 2.标签的嵌套规范 1.块元素可以包含内联元素或某些块

【CSS3】table的css属性

table的css属性 border-collapse 设置是否把表格边框合并为单一的边框. border-spacing 设置分隔单元格边框的距离. caption-side 设置表格标题的位置. empty-cells 设置是否显示表格中的空单元格. table-layout 设置显示单元.行和列的算法. 1.border-collapse:设置是否把表格边框合并位单一边框 table, td, th { border-collapse:separate;/*默认值,边框会被分开*/ bor

前端html--超链接，表格，表单属性

1. 图片与超链接 1. 图片标签 <img src=""> 默认按照图片原始尺寸显示 标签属性 : 1. width : 取px为单位的像素值,设置图片宽度 2. height : 取像素值,设置图片的高度 3. title : 用来设置鼠标悬停于图片上方时的显示文本 4. alt : 当图片加载失败时显示的文本 注意 : 宽高尺寸可以只给一个值,另外一个方向会自适应 2. 超链接标签 1. 什么是超链接 能够实现文件跳转的文本,叫超链接文本 2. 使用超链接 1. 语法

css列表list、表格table

列表list,无序列表ul,有序列表ol 1.列表项样式list-style-type 无列表默认为dist实心圆,有序列表默认为decimal阿拉伯数字(前面不带0) 其他无序列表常用none无样式,circle空心圆,square实心方块 有序列表常用decimal-leading-zero以0开头的数字,lower-roman.upper-roman小写.大写罗马数字,lower-alpha.upper-alpha小写.大写英文字母 ul.a {list-style-type: circl

table相关的API

void lua_getglobal (lua_State *L, const char *name);获取lua全局变量,将lua的全局变量global name压栈.堆栈+1 void lua_setglobal (lua_State *L, const char *name);设置lua全局变量,弹出一个值,并将之设为global name的值.堆栈-1 void lua_createtable (lua_State *L, int narr, int nrec);创建空表并压栈,会根据参

表格(Table)隔行变色

在ASP.NET的Repeater控件,实现隔行变色,是极简单的事情.因为它有ListItemType.Item和ListItemType.AlternatingItem模版.如果在普通的表格(Table)来实现隔行变色,就得使用css样式与jQuery来解决.先来看看原始的表格样式: 打开视图: 在视图中,添加样式: 由于此视图是使用.getJSON()异步加载数据,因此得在加载完成之后,得马上给这个动态的表格添加上面的样式: 网页运行后的效果:

css中与高度相关的属性其百分比的设置

<body> <div style="background-color:red;"> <div style="width:50%;height:50%;background-color:green;"></div> </div> </body> 上面父div宽度继承body元素的宽度,子div内容区宽度50%是相对于父div的宽度,但子div内容区高度设为50%却不是相对于父div高度而是相对于