HTML-02-表格

最新推荐文章于 2025-06-11 08:30:00 发布

原创最新推荐文章于 2025-06-11 08:30:00 发布 · 186 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#html

HTML-表格

结构

<table border="1px" cellspacing="0">
  <!-- border表示边框属性,cellspacing表示单元格之间的空隙 -->
  <tr>
    <th>表头</th>
    <!-- tr表示行,th表示加粗并居中的td,td表示单元格 -->
    <td width="100px" height="100px" align="center" valign="top">1</td>
    <!-- 可以设置单元格大小,align表示单元格内容水平位置,valign表示单元格内容垂直位置 -->
    <td colspan="3">2</td>
    <!-- colspan该指单元格占据水平3个单元格的位置,列合并 -->
    <td rowspan="4">3</td>
    <!-- rowspan指该单元格占据竖直4个单元格的位置,行合并 -->
  </tr>
  <tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>
  </tr>
</table>

table：表格

tr：表示一行

th：表头

td：单元格

border：表格边框属性

cellspacing：单元格空袭

align：单元格内容水平对齐方式，默认为left靠左，取值有：left、center、right

valign：单元格内容垂直对齐方式，默认为middle居中，取值有：top、middle、bottom、baseline

colspan：列合并，即合并水平方向的若干个单元格

rowspan：行合并，即合并垂直方向的若干个单元格

相关标签

caption：双标签，表格的标题
col：单标签，表示一列，col是column列的缩写，（写的位置只要是在table内部即可）

<table border="1px">
  <col width="200px">
  <!-- 表示第一列宽度为200px -->
  <tr>
    <!-- <col width="200px"> -->
    <td>1</td>
    <td>2</td>
  </tr>
  <tr>
    <td>1</td>
    <td>2</td>
  </tr>
</table>

colgroup：双标签，列分组，从上到下进行分组

<table border="1px">
  <colgroup span="4" width="200px"></colgroup>
  <colgroup span="2" width="100px"></colgroup>
  <!-- 将前六列分为一组,宽度为200像素 -->
  <!-- 将后两列分为一组,宽度为100像素 -->
  <tr>
    <td>1</td>
    <td>2</td>
    <td>1</td>
    <td>2</td>
    <td>1</td>
    <td>2</td>
  </tr>
</table>

thead，tfoot，tbody：三者需要联系起来使。通过使用这些元素，使浏览器有能力支持独立于表格表头和表格页脚的表格主体滚动。当包含多个页面的长的表格被打印时，表格的表头和页脚可被打印在包含表格数据的每张页面上

thead 标签必须：作为 table 元素的子元素，出现在 caption、colgroup 元素之后，tbody、 tfoot 和 tr 元素之前。

tfoot 标签必须：作为 table 元素的子元素，出现在 caption、colgroup 和 thead 元素之后，tbody 和 tr 元素之前。

tbody 标签必须：作为 table 元素的子元素，出现在 caption、colgroup 和 thead 元素之后

<table border="1">
  <thead>
    <tr>
      <th>1</th>
      <th>2</th>
    </tr>
  </thead>
  <tfoot>
    <tr>
      <td>7</td>
      <td>8</td>
    </tr>
  </tfoot>
  <tbody>
    <tr>
      <td>3</td>
      <td>4</td>
    </tr>
    <tr>
      <td>5</td>
      <td>6</td>
    </tr>
  </tbody>
</table>

thead, tbody, 和 tfoot 元素默认不会影响表格的布局。不过，您可以使用 CSS 来为这些元素定义样式，从而改变表格的外观。

样例

<!doctype html>
<html>
	<head>
		<meta charset="utf-8">
		<title>简历</title>
	</head>

	<body>
		<table border="1" cellspacing="0" cellpadding="0" align="center" bordercolor="fea500" width="800">
        	<col width="100">
        	<col width="100">
        	<col width="100">
        	<col width="100">
        	<col width="100">
        	<tr align="center" height="42">
            	<td colspan="5">学员介绍</td>
            </tr>
            <tr align="center" height="42">
            	<td>您的大名</td>
                <td></td>
                <td>贵庚</td>
                <td></td>
                <td rowspan="5"><font color="cccccc">放下你最美的照片</font></td>
            </tr>
            <tr align="center" height="42">
            	<td>是否毕业</td>
                <td></td>
                <td>专业是啥</td>
                <td></td>
            </tr>
            <tr align="center" height="42">
            	<td>大学名称</td>
                <td colspan="3"></td>
            </tr>
            <tr align="center" height="42">
            	<td>从事过的工作</td>
                <td colspan="3"></td>
            </tr>
            <tr align="center" height="42">
            	<td>H5基础程度</td>
                <td colspan="2"></td>
                <td></td>
            </tr>
            <tr align="center" height="42">
            	<td>自我性格描述</td>
                <td colspan="4"></td>
            </tr>
            <tr align="center">
            	<td rowspan="2" height="200">简述<br/>1、目标规划<br/>2、对H5疑问<br/>3、建议</td>
                <td rowspan="2" colspan="2" ></td>
                <td colspan="2"></td>
            </tr>
            <tr align="center">
                <td colspan="2"></td>
            </tr>
            <tr align="center" height="42">
            	<td colspan="5">“前端值得你拥有”</td>
            </tr>
        </table>
	</body>
</html>