• Web(二)html5基础-表格高级样式的设置

    第1关_表格高级样式设置相关概念 

     第2关_设置表格的外边框样式

    编程要求
    根据提示，在右侧编辑器补充代码，在右侧编辑器中的Begin - End区域内补充代码，具体要求是：
    1.添加table标签及属性，使得表格的宽度为100，高度为80，边框线粗细设置为4
    2.在table标签中添加frame属性，使得表格外边框显示为上下边框样式。

    1. <html>
    2. <head>
    3.   <meta charset="utf-8"/>
    4.   <title>设置表格外边框属性title>
    5. head>
    6. <body>
    8. <table border="4" width="100" height="80" frame="hsides">
    10. <caption>简易信息表caption>
    11. <tr align=center  valign=middle>
    12.   <th>姓名th>
    13.   <th>年龄th>
    14. tr>
    15. <tr  align=center  valign=middle>
    16.   <td>张三td>
    17.   <td>20td>
    18. tr>
    19. table>
    20. body>
    21. html>

    第3关_设置表格的内边框样式 

     编程要求
    根据提示，在右侧编辑器补充代码，在右侧编辑器中的Begin - End区域内补充代码，具体要求是：
    1.添加table标签及属性，使得表格的宽度为100，高度为80，边框线粗细设置为4
    2.在table标签中添加frame属性，使得表格外边框显示为上下边框样式。
    3.在able标签中添加rules属性，使得表格内边框显示为行边框线样式。

    1. <html>
    2. <head>
    3.   <meta charset="utf-8"/>
    4.   <title>设置表格内边框属性title>
    5. head>
    6. <body>
    8. <table width="100" height="80" border="4" frame="hsides" rules="rows">
    10. <caption>简易信息表caption>
    11. <tr align=center  valign=middle>
    12.   <th>姓名th>
    13.   <th>年龄th>
    14. tr>
    15. <tr  align=center  valign=middle>
    16.   <td>张三td>
    17.   <td>20td>
    18. tr>
    19. table>
    20. body>
    21. html>

    第4关_表格中单元格的合并

    编程要求 根据任务描述的效果图，在 Begin-End 区域内补充代码，创建一个3行4列的签到表，具体要求如下： 1.“姓名”和“备注”单元格在垂直方向实现两个单元格合并 2.“签到”单元格在水平方向实现两个单元格合并 3.“姓名”“签到”“第1次”“第2次”“备注”单元格构成项目表头，请用项目表头单元格标签实现；第三行的单元格为数据单元格，请用数据单元格标签实现。

    1. html>
    2. <html>
    3.  <head>
    4.     <meta charset="UTF-8">
    5.     <title>签到表title>
    6.     <style type="text/css">
    7.        th{background-color:#00ff33;}
    8.        td{background-color:#00ffff;}
    9.     style>
    10.  head>
    11.  <body> 
    12.     <table border="2" width="400" bordercolor="#00ff00" cellpadding="6">
    13.         <caption>签到表caption>
    14.       
    15.         <tr>
    16.            <th rowspan="2">姓名th>
    17.            <th colspan="2">签到th>
    18.            <th rowspan="2">备注th>
    19.         tr>
    20.         <tr>
    21.            <th>第1次th>
    22.            <th>第2次th>
    23.         tr>
    24.         <tr>
    25.            <td>张三td>
    26.            <td>td>
    27.            <td>td>
    28.            <td>td>
    29.         th>
    30.       
    31.     table>   
    32.  body>
    33. html>

    第5关_表格的综合案例

    编程要求
    根据任务描述提示的目标效果，在右侧编辑器补充代码，创建一个题为“家庭账单”的表格，要求如下：
    1.为整个网页添加下图所示背景图，其URLhttps://www.educoder.net/api/attachments/1217848；2.表格边框为2px；表格宽度为600；bordercolor为#00ff00;cellpadding为6；表格在网页中居中排列；
    3.表格标题为“家庭账单”；
    4.单元格的背景等样式已在头部style标签中设置，各单元格的内容及合并要求请参看任务描述中的效果图，要注意绿色显示区的单元格要设置为项目表头，青色显示区的单元格要设置为数据单元格。

    1. html>
    2. <html>
    3.  <head>
    4.     <meta charset="UTF-8">
    5.     <title>表格综合title>
    6.     <style type="text/css">
    7.        th{background-color:#00ff33;}
    8.        td{background-color:#00ffff;text-align:center}
    9.        caption{font-family:黑体;font-size:30px;color:blue}
    10.     style>
    11.  head>
    13. <body background="https://www.educoder.net/api/attachments/1217848">
    14.    <table border="2" width="600" bordercolor="#00ff00" cellpadding="6" align="center" valign="middle">
    15.       <caption>家庭账单caption>
    16.       <tr>
    17.          <th rowspan="2" colspan="2">本周项目th>
    18.          <th colspan="2">费用明细th>
    19.          <th rowspan="2">备注th>
    20.       tr>
    21.       <tr>
    22.          <th>收入th>
    23.          <th>支出th>
    24.       tr>
    25.       <tr>
    26.          <th rowspan="3">收入th>
    27.          <th>工资th>
    28.          <td>10000td>
    29.          <td>0td>
    30.          <td>td>
    31.       tr>
    32.       <tr>
    33.          <th>兼职th>
    34.          <td>2000td>
    35.          <td>0td>
    36.          <td>td>
    37.       tr>
    38.       <tr>
    39.          <th>收入合计th>
    40.          <td>12000td>
    41.          <td>0td>
    42.          <td>td>
    43.       tr>
    44.       <tr>
    45.          <th rowspan="3">支出th>
    46.          <th>生活用品th>
    47.          <td>0td>
    48.          <td>4000td>
    49.          <td>td>
    50.       tr>
    51.       <tr>
    52.          <th>生活用品th>
    53.          <td>0td>
    54.          <td>3000td>
    55.          <td>td>
    56.       tr>
    57.       <tr>
    58.          <th>支出合计th>
    59.          <td>0td>
    60.          <td>7000td>
    61.          <td>td>
    62.       tr>
    63.    table>
    64. body>
    65.  
    66.  
    67.  
    68.  
    69.  
    70.       
    71.        
    72.          
    74. html>


     

  • 相关阅读:
    Hadoop Hive入门
    SimCSE: Simple Contrastive Learning of Sentence Embeddings
    【ML】基于机器学习的糖尿病预测（回归问题）
    【数据分享】2008-2022年全国范围逐年NO2栅格数据（免费获取）
    Docker上安装DM8数据库
    Unity中使用自定义mesh和UImesh
    【C++】类和对象——构造函数
    线程池创建和简单使用
    Spring Boot Web 项目配置解决跨域
    基于php的宠物领养系统
  • 原文地址：https://blog.csdn.net/m0_63324772/article/details/128012806