search

博客列表 >7.4——常用标签与应用场景之表格与单元格

7.4——常用标签与应用场景之表格与单元格

glen
glen原创
2022年07月08日 14:33:19396浏览

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>

效果图：

上一条：伪类选择器以及盒模型常用属性下一条：1、实例演示伪类选择器: 结构伪类与状态伪类 2. 实例演示盒模型常用属性,附图
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议