HTML学习笔记（五）表格

最新推荐文章于 2024-07-22 19:28:31 发布

慕林溪

最新推荐文章于 2024-07-22 19:28:31 发布

阅读量1w

点赞数 7

分类专栏： HTML 文章标签： html

本文链接：https://blog.csdn.net/SGZ_06_666666/article/details/51016800

版权

HTML 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

表格

表格由<table> 标签来定义。每个表格的若干行（由<tr> 标签定义），每行被分割为若干单元格（由<td> 标签定义，即列）。字母 td 指表格数据（table data），即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。

table标签常用属性：

width：表格宽度单位px(可省略)

height：表格高度 单位px(可省略)

align：表格对齐方式 left|center|right

border:边框属性。边框宽度值。不定义边框属性，表格就不显示边框。

cellpadding：单元格的内边距

cellspacing：单元格的外边距

td标签的合并单元格相关属性：

rowspan：行合并

colspan：列合并

基本结构：

<table border="1">
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table>

举个栗子：

<html>
    <body>
        <h3>两行三列小栗子：</h3>
        <table border="3">
            <tr>
               <td>哈哈</td>
               <td>呵呵</td>
               <td>嘻嘻</td>
            </tr>
            <tr>
               <td>哼哼</td>
               <td>嗯嗯</td>
               <td>噢噢</td>
            </tr>
         </table>
     </body>
</html>

表格的表头使用<th>标签进行定义：

栗子延伸：

<html>
  <body>
    <table border="3">
      <tr>
        <th>表头1</th>
        <th>表头2</th>
        <th>表头3</th>
      </tr>
      <tr>
        <td>哈哈</td>
        <td>呵呵</td>
        <td>嘻嘻</td>
      </tr>
      <tr>
        <td>哼哼</td>
        <td>嗯嗯</td>
        <td>噢噢</td>
      </tr>
    </table>
    <br/>
    <br/>
    <table border="2">
      <tr>
        <th>表头1</th>
        <td>哈哈</td>
        <td>哼哼</td>
      </tr>
      <tr>
        <th>表头2</th>
        <td>呵呵</td>
        <td>嗯嗯</td>
      </tr>
      <tr>
        <th>表头3</th>
        <td>嘻嘻</td>
        <td>噢噢</td>
      </tr>
    </table>
  </body>
</html>

图示：

<tbody>：当表格内容非常多时，表格会下载一点显示一点，但如果加上<tbody>标签后，这个表格就要等表格内容全部下载完才会显示。

带标题的表格与跨行或跨列的表格单元格：

<html>
  <body>
    <h4>带标题的粗边框表格</h4>
    <table border="6">
      <caption>我的标题</caption>
      <tr>
        <td>100</td>
        <td>200</td>
        <td>300</td>
      </tr>
      <tr>
        <td>400</td>
        <td>500</td>
        <td>600</td>
      </tr>
    </table>
    <br/>
    <br/>
    <h4>横跨两列的单元格</h4>
    <table border="1">
      <tr>
        <th colspan="2">姓名</th>
        <th>职业</th>
      </tr>
      <tr>
        <td>小白</td>
        <td>小黑</td>
        <td>攻城狮</td>
      </tr>
    </table>
    <h4>横跨两行的单元格：</h4>
    <table border="1">
      <tr>
        <th rowspan="2">姓名</th>
        <td>小白</td>
      </tr>
      <tr>
        <td>小黑</td>
      </tr>
      <tr>
        <th>职业</th>
        <td>攻城狮</td>
      </tr>
    </table>
  </body>
</html>

图示：

表格内的标签：在表格内添加别的标签

<html>
  <body>
    <table border="2">
      <tr>
        <td>
          <p>我是一个段落</p>
          <p>我也是一个段落</p>
        </td>
        <td>
        我这儿有个表格：
          <table border="1">
            <tr>
              <td>A</td>
              <td>B</td>
            </tr>
            <tr>
              <td>C</td>
              <td>D</td>
            </tr>
          </table>
        </td>
      </tr>
      <tr>
        <td>
        我这儿有两个个列表：
          <ul>
            <li>橘子</li>
            <li>葡萄</li>
            <li>菠萝</li>
          </ul>
          <ul>
            <li>美术</li>
            <li>音乐</li>
            <li>骑行</li>
          </ul>
        </td>
        <td>该写点儿啥？</td>
      </tr>
    </table>
  </body>
</html>

单元格内边距：

<html>
  <body>
    <h4>没有单元格内边距：</h4>
    <table border="1">
      <tr>
        <td>小A</td>
        <td>小B</td>
      </tr>
      <tr>
        <td>小C</td>
        <td>小D</td>
      </tr>
    </table>
    <br/>
    <h4>带有单元格内边距：</h4>
    <table border="1" cellpadding="8">
      <tr>
        <td>小A</td>
        <td>小B</td>
      </tr>
      <tr>
        <td>小C</td>
        <td>小D</td>
      </tr>
    </table>
  </body>
</html>

图示：

单元格外边距：

<html>
  <body>
    <h4>没有单元格外边距：<h4>
    <table border="1">
      <tr>
        <td>小A</td>
        <td>小B</td>
      </tr>
      <tr>
        <td>小C</td>
        <td>小D</td>
      </tr>
    </table>
    <br/>
    <h4>带有单元格外边距：</h4>
    <table border="1"cellspacing="8">
      <tr>
        <td>小A</td>
        <td>小B</td>
      </tr>
      <tr>
        <td>小C</td>
        <td>小D</td>
      </tr>
    </table>
  </body>
</html>

在表格中排列内容：

使用 "align" 属性排列单元格内容。

<html>
  <body>
    <h4>没有使用align属性时：</h4>
    <table width="300"border="1">
      <tr>
        <th>姓名</th>
        <th>爱好</th>
        <th>职业</th>
      </tr>
      <tr>
        <td>小白</td>
        <td>看书</td>
        <td>程序猿</td>
      </tr>
      <tr>
        <td>小黑</td>
        <td>绘画</td>
        <td>攻城狮</td>
      </tr>
    </table>
    <h4>使用了align属性后：</h4>
    <table width="300"border="1">
      <tr>
        <th align="left">姓名</th>
        <th align="right">爱好</th>
        <th align="right">职业</th>
      </tr>
      <tr>
        <td align="left">小白</td>
        <td align="right">看书</td>
        <td align="right">程序猿</td>
      </tr>
      <tr>
        <td align="left">小黑</td>
        <td align="right">绘画</td>
        <td align="right">攻城狮</td>
      </tr>
    </table>
  </body>
</html>

图示：

框架（frame）属性：

控制围绕表格的边框

<html>
  <body>
    <h5>frame="box"：</h5>
    <table frame="box">
      <tr>
        <th>姓名</th>
        <th>爱好</th>
      </tr>
      <tr>
        <td>小慕</td>
        <td>绘画</td>
      </tr>
    </table>
    <h5>frame="above"：</h5>
    <table frame="above">
      <tr>
        <th>姓名</th>
        <th>爱好</th>
      </tr>
      <tr>
        <td>小慕</td>
        <td>绘画</td>
      </tr>
    </table>
    <h5>frame="below"：</h5>
    <table frame="below"：>
      <tr>
        <th>姓名</th>
        <th>爱好</th>
      </tr>
      <tr>
        <td>小慕</td>
        <td>绘画</td>
      </tr>
    </table>
    <h5>frame="hsides"：</h5>
    <table frame="hsides"：>
      <tr>
        <th>姓名</th>
        <th>爱好</th>
      </tr>
      <tr>
        <td>小慕</td>
        <td>绘画</td>
      </tr>
    </table>
    <h5>frame="vsides"：</h5>
    <table frame="vsides"：>
      <tr>
        <th>姓名</th>
        <th>爱好</th>
      </tr>
      <tr>
        <td>小慕</td>
        <td>绘画</td>
      </tr>
    </table>
  </body>
</html>

图示：

<!DOCTYPE >
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>
<body>
	<table width="600" align="center" border="1">
    	<tr>
        	<td>A1</td><td>A2</td><td>A3</td>
        </tr>
    	<tr>
        	<td>B1</td><td>B2</td><td>B3</td>
        </tr>
        <tr>
        	<td colspan="3">
            	<table width="600" align="center" border="1">
                	<tr>
                    	<td>C1</td>
                        <td>C2</td>
                    </tr>
                </table>
            </td>
        </tr>
    </table>
</body>
</html>

空单元格

使用 " " 处理没有内容的单元格。

慕林溪

关注

7
点赞
踩
12

收藏

觉得还不错? 一键收藏
0
评论
HTML学习笔记（五）表格

表格表格由标签来定义。每个表格均有若干行（由标签定义），每行被分割为若干单元格（由标签定义）。字母 td 指表格数据（table data），即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。
复制链接

扫一扫