Community Learn Tools Library Leisure
search
English
Home > List of blog posts > 7.4——常用标签与应用场景之表格与单元格
Blogger Information
Blog 16
fans 0
comment 0
visits 6121
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
7.4——常用标签与应用场景之表格与单元格
glen
Original
393 people have browsed it

7-4

一、html中的常用属性

  • 通用属性
    1.id 唯一属性，唯一性自己保证
    2.class 同类元素
    3.style 样式元素

（id class style 也是预置属性，只不过几乎所有元素都会有）

  • 预置属性
    1.预置属性是一个标签内预设置的属性
    如：
    1. <a href="https://www.php.cn/">php中文网</a>
    2. 其中 href 就是预置属性，href 中应放网址，站点链接
    效果图：php中文网

<img src="" alt="">

  1. <img src="" alt="这是一张失传已久的图片">
  2. img 标签中也有两个自由属性，
  3. src"" 指明这里放的是什么图片
  4. alt"" 是在图片失效或不能正常显示的情况下显示的文字效果
  5. 在 <img src="" alt="这是一张失传已久的图片"> 中也能有id  有class  有style
  6.  <img src="" alt="这是一张失传已久的图片"id=" " class=" ">

效果图：

  • 事件属性
    例如，通过一个按钮，或者点击某样东西，触发的一个行为，或者事件，这样一个这种行为，我们就把它定义为事件属性，就用事件属性
  1. 例如：<button onclick="alert('上传成功')">上传</button>
  2. 注意：事件属性，有一个通用前缀：on+事件名称   这样总体就叫事件属性

效果图：

跟事件属性一样，都有一个通用前缀：”data-“

  1. 朱老师举的案例：<div data-user-email="1548660787@qq.com">我的邮箱是</div>
  2.     <button onclick="this.nextElementSibling.textContent = this.previousElementSibling.dataset.userEmail">获取邮箱</button>
  3.     <p></p>

案例图：

二、图片，链接，列表的组合

1.图片

图片是外部资源，是通过标签引入到当前html中的， 通常使用”单标签”
img标签
<img src="" alt="">
src 里面放图片，链接，地址
alt 是在图片失效或不能正常显示的情况下显示的文字效果
width 图片宽度缩放

示例：

  1.  <img src="https://img.php.cn/upload/course/000/000/001/5d24230536122573.jpg" alt="天龙八部" width="200">

示例效果图：

2.链接

a 标签
<a href=""></a>
href 里放网址，站点
例如：

  1.   <a href="https://www.php.cn/">php.cn</a>20期开班啦

示例图：

  1. 页面打开方式的不同：默认情况下是在当前页面打开，  
  2.   target 属性  是指在哪里打开，例如：target="_blank" 在新页面打开  示例代码：<a href="https://www.php.cn/" target="_blank">php.cn</a>20期开班啦
  4.   target="self"  默认窗口打开
3.列表

1.无序列表

  1.  <ul>
  3.   </ul>
  5.    示例代码：
  6.  <ul>
  7.         <li><a href="">今天1</a></li>
  8.         <li><a href="">明天2</a></li>
  9.         <li><a href="">后天3</a></li>
  10. </ul>

示例效果图：

2.有序列表

  1. <ol>
  3. </ol>
  5. 示例代码：
  6. <ol>
  7.     <li><a href="">今天1</a></li>
  8.     <li><a href="">明天2</a></li>
  9.     <li><a herf="">后天3</a></li>
  10. </ol>

示例效果图：

4.自定义列表 dl
  1. 示例代码：
  2.   <dl>
  3.         <dt>地址</dt>
  4.         <dd>湖北省武汉市</dd>
  5.         <dt>邮箱地址</dt>
  6.         <dd>1548660787@qq.com</dd>
  7.  </dl>

示例效果图：

图片.链接.地址，通常不会单独使用，而是与其他元素组合使用，如与列表组合使用
  1. ul>li>img
  3. <ul>
  4.     <li><img src="images/1.jpg" alt=""></li>
  5. </ul>
  6. 当前图片不可点击，如想图片能够点击，或点击跳转到，则需在<li> </li>里面加一个  a  标签  如下：
  7. <ul>
  8.     <li><a href="sss"><img src="images/1.jpg"   alt="图片" width="100"></a></li>
  9.     注：width是设置的图片大小，等比缩放
  10. </ul>

效果图如下：图片

4.表格

表格跟列表一样是用组合元素来表示，但列表是多行单列，表格可以是多行多列。

标题：<caption>标题内容</caption>

标头：为了表头的管理和样式的统一，专门划分了一个区块<thead></thead>

  1. <thead>
  2.     <tr bgcolor="red">
  3.         <th>111</th>
  4.         <th>111</th>
  5.         <th>111</th>
  6.         <th>111</th>
  7.     </tr>
  8. </thead>
  9. (th,预置了text-align:center;font-weight:bold  的td标签)
  11. 表尾：tfoot  
  12. <tfoot>
  13.     <tr>
  14.     <td> 内容 </td>
  15.     </tr>
  16. </tfoot>
  1. 代码示例：
  2.  <table width="500" border="2">
  3.         <caption>表格标签</caption>
  5.         <!--<thead>
  6.             <tr bgcolor="red">
  7.                 <td style="text-align:center;font-weight:bold ;">111</td>
  8.                 <td>111</td>
  9.                 <td>111</td>
  10.                 <td>111</td>
  11.             </tr>
  12.         </thead> -->
  13.         <thead>
  14.             <tr bgcolor="red">
  15.                 <th>111</th>
  16.                 <th>111</th>
  17.                 <th>111</th>
  18.                 <th>111</th>
  19.             </tr>
  20.         </thead>
  23.         <tbody>
  25.             <tr>
  26.                 <td>111</td>
  27.                 <td>111</td>
  28.                 <td>111</td>
  29.                 <td>111</td>
  30.             </tr>
  31.             <tr>
  32.                 <td>111</td>
  33.                 <td>111</td>
  34.                 <td>111</td>
  35.                 <td>111</td>
  36.             </tr>
  37.             <tr>
  38.                 <td>111</td>
  39.                 <td>111</td>
  40.                 <td>111</td>
  41.                 <td>111</td>
  42.             </tr>
  43.         </tbody>
  44.     </table>
  49. </body>
  50. </html>

示例效果图：

  • 合并表格，合并单元格；

1.行的合并： colspan

  1.   在表头下的第一行，，就是二行的   <td > </td>  中添加一个属性：colsapn  ，如：<td colspan="3" bgcolor="yellow">111</td>
  2.    colspan="3"  是水平合并三行的意思，
  3.    但：合并之后，表格外会多出两行，单元格，因为，向水平合并了三行，剩下的两行就会被挤出去了，多余出去了，因此，要删除剩下的两行，如下：
  4.    <tr>
  5.       <td>111</td>
  6.       <td colspan="3" bgcolor="yellow">111</td>
  7.  </tr>

示例效果图：

2.列的合并: rowspan (也可以说是垂直合并/列合并)

  1.   从第三行第二列，开始，向下，垂直合并三行/单元格
  2.   注意：不管是垂直方向还是水平方向，都只能在单元格合并，属性加在单元格内，，不能加在  <hr>  </hr>  内
  3.   例如：正确示范：
  4.   <tr>
  5.      <td>111</td>
  6.      <td rowspan="3" bgcolor="cyan">111</td>
  7.      <td>111</td>
  8.      <td>111</td>
  9.  </tr>
  11.  错误示范：
  12.   <tr rowspan="3" bgcolor="cyan">
  13.                 <td>111</td>
  14.                 <td>111</td>
  15.                 <td>111</td>
  16.                 <td>111</td>
  17.  </tr>
  18.  注意：跟列的合并一样，剩下多余的表格/单元格，就会被挤出表格外，因此要在下面的每行中删除，每行的第二列。就是删除相应的列。
  19.  代码示例：
  20.   <thead>
  21.         <tr bgcolor="red">
  22.                 <th>111</th>
  23.                 <th>111</th>
  24.                 <th>111</th>
  25.                 <th>111</th>
  26.         </tr>
  27.  </thead> 
  28. <tbody>
  29.        <tr>
  30.            <td>111</td>
  31.            <td colspan="3" bgcolor="yellow">111</td>
  32.        </tr>
  33.        <tr>
  34.            <td>111</td>
  35.            <td rowspan="3" bgcolor="cyan">111</td>
  36.            <td>111</td>
  37.            <td>111</td>
  38.             </tr>
  39.             <tr>
  40.                 <td>111</td>
  41.         （此处就是被删除的相应的列）
  42.                 <td>111</td>
  43.                 <td>111</td>
  44.             </tr>
  45.         </tbody>

示例效果图：

作业：

  1. 代码：
  2. </head>
  3. <body>
  5.     <table width="800" height="400" border="5">
  7.             <caption>经管学院学生课程表</caption>
  8.         <thead>
  9.             <tr>
  10.                 <th colspan="10">经管学院学生课程表</th>
  12.             </tr>
  13.         </thead>
  14.         <tbody>
  15.             <tr>
  17.                 <th width="100" bgcolor="grey"> 时间 </th>
  18.                 <th width="100" bgcolor="grey">节次</th>
  19.                 <th width="110" height="50" bgcolor="grey">星期一</th>
  20.                 <th width="100" bgcolor="grey">星期二</th>
  21.                 <th width="100" bgcolor="grey">星期三</th>
  22.                 <th width="100" bgcolor="grey">星期四</th>
  23.                 <th width="100" bgcolor="grey">星期五</th>
  24.                 <th width="100" bgcolor="grey">星期六</th>
  25.                 <th width="100" bgcolor="grey">星期天</th>
  27.             </tr>
  28.             <tr>
  30.                 <th rowspan="4" bgcolor="cyan">上午</th>
  31.                 <th width="100" height="50">第一节8.30~9.15</th>
  32.                 <th>经济学</th>
  33.                 <th>金融学</th>
  34.                 <th>会计学</th>
  35.                 <th>金融学</th>
  36.                 <th>会计学</th>
  37.                 <th width="100" bgcolor="pink" colspan="2" rowspan="12">双休</th>
  40.             </tr>
  41.             <tr>
  44.                 <th width="100" height="50">第二节9.25~10.10</th>
  45.                 <th>会计学</th>
  46.                 <th  width="110" height="50">国际贸易学</th>
  47.                 <th>统计学</th>
  48.                 <th>会计学</th>
  49.                 <th>会计学</th>
  52.             </tr>
  53.             <tr>
  56.                 <th width="100" height="50">第三节10.25~11.10</th>
  57.                 <th width="100">国际贸易学</th>
  58.                 <th>会计学</th>
  59.                 <th>金融学</th>
  60.                 <th>统计学</th>
  61.                 <th  width="110" height="50">国际贸易学</th>
  66.             </tr>
  67.             <tr>
  69.                 <th>第四节11.20~12.05</th>
  70.                 <th>金融学</th>
  71.                 <th>刑法学</th>
  72.                 <th>金融学</th>
  73.                 <th>会计学</th>
  74.                 <th  width="110" height="50">国际贸易学</th>
  78.             </tr>
  79.             <tr>
  80.                 <th colspan="7" bgcolor="green" width="100" height="50">午休时间12.05~14.00</th>
  82.             </tr>
  83.             <tr>
  84.                 <th rowspan="3" bgcolor="cyan">下午</th>
  85.                 <th>第五节14.00~14.45</th>
  86.                 <th>会计学</th>
  87.                 <th>刑法学</th>
  88.                 <th>金融学</th>
  89.                 <th>统计学</th>
  90.                 <th>会计学</th>
  94.             </tr>
  95.             <tr>
  97.                 <th>第六节14.55~15.40</th>
  98.                 <th>金融学</th>
  99.                 <th>刑法学</th>
  100.                 <th  width="110" height="50">国际贸易学</th>
  101.                 <th>会计学</th>
  102.                 <th>会计学</th>
  107.             </tr>
  108.             <tr>
  110.                 <th>第七节 15.55~16.40</th>
  111.                 <th>金融学</th>
  112.                 <th>刑法学</th>
  113.                 <th>金融学</th>
  114.                 <th>会计学</th>
  115.                 <th>会计学</th>
  119.             </tr>
  121.             <tr>
  122.                 <th colspan="7" bgcolor="orange"  width="100" height="50">晚间自由活动休息时间</th>
  124.             </tr>
  125.             <tr>
  127.                 <th bgcolor="purple">晚自习</th>
  128.                 <th>第八节16.50~17.35</th>
  129.                 <th>经济学</th>
  130.                 <th>金融学</th>
  131.                 <th>会计学</th>
  132.                 <th>金融学</th>
  133.                 <th>会计学</th>
  136.             <tr>
  138.             </tr>
  140.         </tbody>
  141.         <tfoot>
  142.             <tr>
  143.                 <th>下课</th>
  144.                 <th colspan="6">一天的课程就到此结束啦</th>
  146.             </tr>
  148.         </tfoot>
  150.     </table>
  153. </body>
  154. </html>

效果图：

Correcting teacher：PHPzPHPz

Correction status：qualified

Teacher's comments：
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post