HTML中表格总结

最新推荐文章于 2024-04-24 09:27:42 发布

Y9186

最新推荐文章于 2024-04-24 09:27:42 发布

阅读量292

点赞数 1

文章标签： html 前端

本文链接：https://blog.csdn.net/iteuko/article/details/121110919

版权

话不多说，直奔主题，本人会从两方面总结表格

一，表格的构成。二，表格的合并。三，表格的嵌套。四，表格的用法。

一，表格的构成（构成的元素）

构成表格的元素
<caption>	定义表格标题。
<table>	定义表格
<tr>	定义表格中的行
<td>	定义表格中的单元
<tbody>	定表格中的主体内容
<tfoot>	定义表格中的表注内容（脚注）
<thead>	定义表格中的表头内容
<th>	定义表格中的表头单元格

若只需要制作简单的表格，只用前三个便可。

<!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <title>这是一个简单的两行两列的表格</title>
 </head>
 <body>   <!--border是表格的边框线，不加border属性就没有边框线-->
       <table border="1px">
           <tr>
              <td>66</td>
              <td>88</td>
           </tr>
           <tr>
              <td>66</td>
              <td>88</td>
           </tr>
       </table>
     
 </body>
 </html>

若要制作较复杂的表格，则上述元素需要全用到，那些元素是定义那块区域的含义。并不能显示出什么效果。

<! DOCTYPE html>
<html lang="en">
<head>
     <meta charset="UTF-8">
      <title>Document</title>
</head>
<body>
     <table border="1px">
       <!--头部-->
       <thead >
           <tr>
             <th>水果</th>
             <th>苹果</th>
             <th>梨子</th>  
          </tr>
       </thead>
       <!--主体-->
       <tbody >
            <tr>
                <td>单价</td>
                <td>五元/斤</td>
                <td>五元/斤</td>
            </tr>
            <tr>
                <td>数量</td>
                <td>两斤</td>
                <td>两斤</td>
            </tr>
       </tbody>
       <!--表注-->
       <tfoot >
            <tr>
                 <td>总计</td>
                 <td>十元</td>
                 <td>十元</td>
            </tr>
       </tfoot>
     </table>
</body>
</html>

二，表格的合并

表格合并的属性
colspan	同一行单元格合并。
rowspan	同一列单元格合并。
属性取值	rowspan=“需要合并的格数”

这是未合并的表格代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
     <table border="1px">
       <tr>
         <td>&emsp;</td>
         <td>&emsp;</td>
       </tr>
       <tr>
         <td>&emsp;</td>
         <td>&emsp;</td>
       </tr>
       <tr>
         <td>&emsp;</td>
         <td>&emsp;</td>
       </tr>
     </table>
  
</body>
</html>

这是合并后的代码，需要注意一点的是表格合并，要把你合并的那个单元格的代码删除。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
     <table border="1px">
       <tr>
         <td colspan="2">&emsp;</td>
         
       </tr>
       <tr>
         <td rowspan="2">&emsp;</td>
         <td>&emsp;</td>
       </tr>
       <tr>
         <td>&emsp;</td>
         
       </tr>
     </table>
  
</body>
</html>

三，表格的嵌套

嵌套就表格中还有表格，那么需要怎么嵌套呢？我们只需要在单元格里嵌套就可以了。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
     <table border="1px">
       <tr>
        <td>&emsp;
            <!--嵌套表格-->
            <table border="1px">
              <tr>
                <td>&emsp;</td>
                <td>&emsp;</td>
              </tr>
              <tr>
                <td>&emsp;</td>
                <td>&emsp;</td>
              </tr>
            </table>
        </td>
         <td>&emsp;</td>
       </tr>
       <tr>
         <td>&emsp;</td>
         <td>&emsp;</td>
       </tr>
       <tr>
         <td>&emsp;</td>
         <td>&emsp;</td>
       </tr>
     </table>
  
</body>
</html>

四，表格的用法。

表格的用处不仅仅只实用制作表格，还可以用来写电影网站目录和注册页面（可以是注册页面居中）

电影网站目录

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
      <h1>热门电影板块</h1><hr>
      最近热门电影&nbsp;&nbsp;热门&nbsp;最新&nbsp;豆瓣高分&nbsp;&nbsp;冷门佳片&nbsp;&nbsp;华语&nbsp;欧美&nbsp;日本&nbsp;<a href="#">更多&gt;&gt;</a><hr>

       <table width="800"height="500" align="center">
       	<tr>
       		<td><img src="F:\Bin\云计算\img\1.png"/></td>
       		<td><img src="F:\Bin\云计算\img\2.png"/></td>
       		<td><img src="F:\Bin\云计算\img\1.png"/></td>
       	    <td><img src="F:\Bin\云计算\img\2.png"/></td>
       	</tr>
       	<tr>
       		<td>死寂</td>
       		<td>致命ID</td>
       		<td>盗梦空间</td>
       		<td>禁闭岛</td>
       	</tr>
       	<tr >
       		<td><img src="F:\Bin\云计算\img\1.png"/></td>
       		<td><img src="F:\Bin\云计算\img\2.png"/></td>
       		<td><img src="F:\Bin\云计算\img\1.png"/></td>
       	    <td><img src="F:\Bin\云计算\img\2.png"/></td>
       	</tr>
       	<tr>
       		<td>死寂</td>
       		<td>致命ID</td>
       		<td>盗梦空间</td>
       		<td>禁闭岛</td>
       	</tr>
       	
       </table>

     
	
</body>
</html>

效果图：

注册页面居中：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
     <form>
        <table align="center">
        	<tr>
        	    <td>用户名:</td>
        	    <td><input type="text" name="username" placeholder="请输入用户名"/></td>	
        	</tr>
        	<tr>
        	    <td>密码:</td>
        		<td><input type="password" name="userpassword" placeholder="请输入密码"/></td>	
        	</tr>
        	<tr>
        	    <td>确认密码:</td>
        		<td>
        	      <input type="password" placeholder="请确认密码"/>
        		</td>	
        	</tr>
            <tr>
               <td>
                  <input type="submit" value="登录">
               </td>
               <td>
                  <input type="reset" value="清空">
               </td>
            </tr>
	    </table>
	    </form>
</body>
</html>

效果图：