html5，table表格

Posted

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了html5，table表格相关的知识，希望对你有一定的参考价值。

求一个如图所示的htmltable表格格式

你好！

<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>
        <tr>
            <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>
        <tr>
            <td width="100" height="0" align="left" valign="center" rowspan="2"><b>Golden 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>
        <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>

希望对你有帮助！

 参考技术A <!doctype html>
<html>
<head>
  <meta charset="UTF-8">
  <meta http-equiv="content-type" content="text/html;charset=UTF-8">
  <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Example</title>
</head>
<body>

<table width="100%" border="1" cellpadding="0" cellspacing="0">
  <thead>
  <tr>
    <th colspan="4" align="center">金满贯</th>
  </tr>
  <tr>
    <th>网球奖项<br/>（英文）</th>
    <th>网球奖项<br/>（中文）</th>
    <th>分类</th>
    <th>信息</th>
  </tr>
  </thead>
  <tbody>
  <tr>
    <td rowspan="2">
      Golden Slam
    </td>
    <td rowspan="2">
      金满贯<br/>★★★☆☆
    </td>
    <td>年度金满贯</td>
    <td>年度金满贯（这里是年度金满贯介绍）</td>
  </tr>
  <tr>
    <td>职业金满贯</td>
    <td>职业金满贯（这里是职业金满贯介绍）</td>
  </tr>
  </tbody>
</table>

</body>
</html>

 参考技术B <!doctype html><html><head> <meta charset="UTF-8"> <meta http-equiv="content-type" content="text/html;charset=UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Example</title></head><body> <table width="100%" border="1" cellpadding="0" cellspacing="0"> <thead> <tr> <th colspan="4" align="center">金满贯</th> </tr> <tr> <th>网球奖项（英文）</th> <th>网球奖项（中文）</th> <th>分类</th> <th>信息</th> </tr> </thead> <tbody> <tr> <td rowspan="2"> Golden Slam </td> <td rowspan="2"> 金满贯★★★☆☆ </td> <td>年度金满贯</td> <td>年度金满贯（这里是年度金满贯介绍）</td> </tr> <tr> <td>职业金满贯</td> <td>职业金满贯（这里是职业金满贯介绍）</td> </tr> </tbody></table> </body></html> 参考技术C 这个你直接右键点击表格,选择弹出菜单里的,查看页面元素,不就看到他用的样式了吗,直接复制过来用就好了本回答被提问者采纳 参考技术D 这个要写样式表的

HTML 教程表格标签

作者 | 阮一峰

表格（table）以行（row）和列（column）的形式展示数据。

1、<table>，<caption>

<table>是一个块级容器标签，所有表格内容都要放在这个标签里面。

<table>
  ... ...
</table>

<caption>总是<table>里面的第一个子元素，表示表格的标题。该元素是可选的。

<table>
  <caption>示例表格</caption>
</table>

2、<thead>、<tbody>、<tfoot>

<thead>、<tbody>、<tfoot>都是块级容器元素，且都是<table>的一级子元素，分别表示表头、表体和表尾。

<table>
  <thead>... ...</thead>
  <tbody>... ...</tbody>
  <tfoot>... ...</tfoot>
</table>

这三个元素都是可选的。如果使用了<thead>，那么<tbody>和<tfoot>一定在<thead>的后面。如果使用了<tbody>，那么<tfoot>一定在<tbody>后面。

大型表格内部可以使用多个<tbody>，表示连续的多个部分。

3、<colgroup>，<col>

<colgroup>是<table>的一级子元素，用来包含一组列的定义。<col>是<colgroup>的子元素，用来定义表格的一列。

<table>
  <colgroup>
    <col>
    <col>
    <col>
  </colgroup>
</table>

上面代码表明表格有3列。

<col>不仅是一个单独使用的标签，没有结束标志，而且还是一个空元素，没有子元素。它的主要作用，除了申明表格结构，还可以为表格附加样式。

<table>
  <colgroup>
    <col class="c1">
    <col class="c2">
    <col class="c3">
  </colgroup>
  <tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>
  </tr>
</table>

上面代码中，<colgroup>声明表格有三列，每一列有自己的 class，可以使用 CSS 针对每个 class 设定样式，会对整个表格生效。

<col>有一个span属性，值为正整数，默认为1。如果大于1，就表示该列的宽度包含连续的多列。

<table>
  <colgroup>
    <col>
    <col span="2">
    <col>
  </colgroup>
</table>

上面代码中，表格的表头定义了3列，实际数据有4列。表头的第2列会连续跨2列。

4、<tr>

<tr>标签表示表格的一行（table row）。如果表格有<thead>、<tbody>、<tfoot>，那么<tr>就放在这些容器元素之中，否则直接放在<table>的下一级。

<table>
  <tr>...</tr>
  <tr>...</tr>
  <tr>...</tr>
</table>

上面代码表示表格共有3行。

5、<th>，<td>

<th>和<td>都用来定义表格的单元格。其中，<th>是标题单元格，<td>是数据单元格。

<table>
  <tr>
    <th>学号</th><th>姓名</th>
  </tr>
  <tr>
    <td>001</td><td>张三</td>
  </tr>
  <tr>
    <td>002</td><td>李四</td>
  </tr>
</table>

上面代码中，表格一共有三行。第一行是标题行，所以使用<th>；第二行和第三行是数据行，所以使用<td>。

（1）colspan属性，rowspan属性

单元格会有跨越多行或多列的情况，这要通过colspan属性和rowspan属性设置，前者表示单元格跨越的栏数，后者表示单元格跨越的行数。它们的值都是一个非负整数，默认为1。

<table>
  <tr>
    <td colspan="2">A</td><td>B</td>
  </tr>
  <tr>
    <td>A</td><td>B</td><td>C</td>
  </tr>
</table>

上面代码中，第一行的第一个单元格会跨两列。

（2）headers属性

如果表格很大，单元格很多，源码里面会看不清，哪个单元格对应哪个表头，这时就可以使用headers属性。

<table>
  <tr>
    <th id="no">学号</th><th id="names">姓名</th>
  </tr>
  <tr>
    <td headers="no">001</td><td headers="names">张三</td>
  </tr>
  <tr>
    <td headers="no">002</td><td headers="names">李四</td>
  </tr>
</table>

上面代码中，标题栏的<th>设置了id属性，后面的<td>单元格的headers属性就对应这些id属性的值，因此就能看出来这些单元格对应哪个标题栏。

headers属性的值总是对应<th>标签的id属性的值。由于一个单元格可以对应多个标题栏（跨行的情况），所以headers属性可以是一个空格分隔的字符串，对应多个id属性的值。

（3）scope属性

scope属性只有<th>标签支持，一般不在<td>标签使用，表示该<th>单元格到底是栏的标题，还是列的标题。

<table>
  <tr>
    <th scope="col">姓名</th>
    <th scope="col">学号</th>
    <th scope="col">性别</th>
  </tr>
  <tr>
    <th scope="row">张三</th>
    <td>001</td>
    <td>男</td>
  </tr>
  <tr>
    <th scope="row">李四</th>
    <td>002</td>
    <td>男</td>
  </tr>
</table>

上面代码中，第一行的标题栏都是列标题，所以<th>的scope属性为col，第二行和第三行的第一列是行标题，所以<th>标签的scope属性为row。

scope属性可以取下面这些值。

  • row：该行的所有单元格，都与该标题单元格相关。

  • col：该列的所有单元格，都与该标题单元格相关。

  • rowgroup：多行组成的一个行组的所有单元格，都与该标题单元格相关，可以与rowspan属性配合使用。

  • colgroup：多列组成的一个列组的所有单元格，都与该标题单元格相关，可以与colspan属性配合使用。

  • auto：默认值，表示由浏览器自行决定。

下面是一个colgroup属性和rowgroup属性的例子。

<table>
  <thead>
    <tr>
      <th scope="col">海报名称</th>
      <th scope="col">颜色</th>
      <th colspan="3" scope="colgroup">尺寸</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th rowspan="3" scope="rowgroup">Zodiac</th>
      <th scope="row">Full color</th>
      <td>A2</td>
      <td>A3</td>
      <td>A4</td>
    </tr>
    <tr>
      <th scope="row">Black and white</th>
      <td>A1</td>
      <td>A2</td>
      <td>A3</td>
    </tr>
    <tr>
      <th scope="row">Sepia</th>
      <td>A3</td>
      <td>A4</td>
      <td>A5</td>
    </tr>
  </tbody>
</table>

上面的例子中，列标题“尺寸”的scope属性为colgroup，表示这个标题单元格对应多列（本例为3列）；行标题的scope属性为rowgroup，表示这个标题单元格对应多行（本例为2行）。

本文完~

以上是关于html5，table表格的主要内容，如果未能解决你的问题，请参考以下文章

HTML5：表格

html5呈现table使用啥标签

Web前端HTML5&CSS315-表格

jQuery操作table表格

html5制作表格

html5中怎样把表格和表单合并