阅读 100

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）的列属性，从而绘制出不同的表格

 
 <html>
 <head>
 <meta charset="UTF-8">
 <title>表格标签title>
 head>
 <body>
     
     <h1>-----3行4列的表格-----h1>
     <h2>table row(tr)：表格的行，table data(td)：表格数据h2>
     <h2>1、border表示给表格加边界，数值表示粗细大小h2>
     <table border="1">
         <tr>
             <td>1-1td>
             <td>1-2td>
             <td>1-3td>
             <td>1-4td>
         tr>   
         <tr>
             <td>2-1td>
             <td>2-2td>
             <td>2-3td>
             <td>2-4td>
         tr>
         <tr>
             <td>3-1td>
             <td>3-2td>
             <td>3-3td>
             <td>3-4td>
         tr>
     table>
     
     <h2>2、cellspacing="0"表示表格间距为0h2>
     <table border="1" cellspacing="0">
         <tr>
             <td>1-1td>
             <td>1-2td>
             <td>1-3td>
             <td>1-4td>
         tr>   
         <tr>
             <td>2-1td>
             <td>2-2td>
             <td>2-3td>
             <td>2-4td>
         tr>
         <tr>
             <td>3-1td>
             <td>3-2td>
             <td>3-3td>
             <td>3-4td>
         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>88td>
         tr>
         <tr>
             <td>数学td>
             <td>99td> 
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>88td> 
　　tr> 
　　<tr> 
　　　　<td>数学td> 
　　　　<td>99td> 
　　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-1td> 
　　　　<td rowspan="2">1-3td> 
　　tr> 
　　<tr> 
　　　　<td rowspan="2">2-1td> 
　　　　<td>2-2td> 
　　tr> 
　　<tr> 
　　　　<td colspan="2" align="center">3-2td> 
　　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>1td> 
　　　　<td>罗技鼠标td> 
　　　　<td align="center">99td> 
　　tr> 
　　<tr> 
　　　　<td>2td> 
　　　　<td>雷蛇键盘td> 
　　　　<td align="center">199td> 
　　tr> 
　　<tr> 
　　　　<th colspan="2">总价：th> 
　　　　<td>￥298td> 
　　tr> 
table> 
body> 
html>

显示效果如下：

 

 

 

 

 

原文：https://www.cnblogs.com/XiaoCui-blog/p/14957896.html
文章分类
代码人生
文章标签
html
标签
表格
版权声明：本站是系统测试站点，无实际运营。本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 XXXXXXo@163.com 举报，一经查实，本站将立刻删除。
相关推荐