【Eclipse】HTML基础（三）-HTML标签（表格标签）

5.5 表格标签

表格由一系列标签组合而成

  1. table：表格

  • 属性：border用于设置边框粗细，cellspacing用于设置单元格的间距（0为无间距）

  1. tr：table row，表示table的行

  • 编写在table标签中，作为table标签的子标签

  1. td：table data，表示table的列

  • 编写在tr标签中，作为tr标签的子标签

  1. th：table head，表示table的表头

  • 编写在tr标签中，作为tr标签的子标签，与td使用方法一样，但是文字会加粗并且居中显示

         5.表格中可以在td或者th中添加跨行（rowspan）和跨列（colspan）的列属性，从而绘制出不同的表格

 <!DOCTYPE html>
 <html>
 <head>
 <meta charset="UTF-8">
 <title>表格标签</title>
 </head>
 <body>
     <!-- 3行4列的表格 -->
     <h1>-----3行4列的表格-----</h1>
     <h2>table row(tr)：表格的行，table data(td)：表格数据</h2>
     <h2>1、border表示给表格加边界，数值表示粗细大小</h2>
     <table border="1">
         <tr>
             <td>1-1</td>
             <td>1-2</td>
             <td>1-3</td>
             <td>1-4</td>
         </tr>   
         <tr>
             <td>2-1</td>
             <td>2-2</td>
             <td>2-3</td>
             <td>2-4</td>
         </tr>
         <tr>
             <td>3-1</td>
             <td>3-2</td>
             <td>3-3</td>
             <td>3-4</td>
         </tr>
     </table>
     
     <h2>2、cellspacing="0"表示表格间距为0</h2>
     <table border="1" cellspacing="0">
         <tr>
             <td>1-1</td>
             <td>1-2</td>
             <td>1-3</td>
             <td>1-4</td>
         </tr>   
         <tr>
             <td>2-1</td>
             <td>2-2</td>
             <td>2-3</td>
             <td>2-4</td>
         </tr>
         <tr>
             <td>3-1</td>
             <td>3-2</td>
             <td>3-3</td>
             <td>3-4</td>
         </tr>
     </table>
     
     <h2>3、成绩单跨列显示：colspan="列数"，表示当前td占用两个td的宽</h2>
     <table border="1" cellspacing="0"  width="200">
         <tr>
             <td colspan="2">成绩单</td>
         </tr>
         <tr>
             <td>语文</td>
             <td>88</td>
         </tr>
         <tr>
             <td>数学</td>
             <td>99</td> 
</tr> 
</table> 
     
<h2>4、成绩单跨行显示：rowspan="行数"，表示当前td占用两个td的高</h2> 
<table border="1" cellspacing="0" width="200"> 
　　<tr> 
　　　　<td colspan="3">成绩单</td> 
　　</tr> 
　　<tr> 
　　　　<td rowspan="2">哪吒</td> 
　　　　<td>语文</td> 
　　　　<td>88</td> 
　　</tr> 
　　<tr> 
　　　　<td>数学</td> 
　　　　<td>99</td> 
　　</tr> 
</table> 
     
<h2>5、练习1    补充：align="center"表示居中</h2> 
<img alt="图片加载失败" src="test1.jpg"><br> 
<h3>输出结果如下：</h3> 
<table border="1" cellspacing="0"> 
　　<tr> 
　　　　<td colspan="2" align="center">1-1</td> 
　　　　<td rowspan="2">1-3</td> 
　　</tr> 
　　<tr> 
　　　　<td rowspan="2">2-1</td> 
　　　　<td>2-2</td> 
　　</tr> 
　　<tr> 
　　　　<td colspan="2" align="center">3-2</td> 
　　</tr> 
</table> 
     
<h2>练习2：购物车    补充： table head(td)：和td一样，只不过是文字加粗居中</h2> 
<img alt="加载图片失败" src="test2.jpg"> 
<table border="1" cellspacing="0"> 
　　<tr> 
　　　　<th>编号</th> 
　　　　<th>名称</th> 
　　　　<th>价格</th> 
　　</tr> 
　　<tr> 
　　　　<td>1</td> 
　　　　<td>罗技鼠标</td> 
　　　　<td align="center">99</td> 
　　</tr> 
　　<tr> 
　　　　<td>2</td> 
　　　　<td>雷蛇键盘</td> 
　　　　<td align="center">199</td> 
　　</tr> 
　　<tr> 
　　　　<th colspan="2">总价：</th> 
　　　　<td>￥298</td> 
　　</tr> 
</table> 
</body> 
</html>

显示效果如下：

 

 

 

 

 

posted @ 2021-07-01 11:03  Coder_Cui  阅读(237)  评论(0)  编辑  收藏  举报