educoder实训平台-----html5—表格高级样式的设置

最新推荐文章于 2024-07-10 23:54:36 发布

白夜的月亮

最新推荐文章于 2024-07-10 23:54:36 发布

阅读量673

点赞数 1

分类专栏： educoder平台实训html-web实训文章标签： python 字符串 html

本文链接：https://blog.csdn.net/m0_59076472/article/details/121590025

版权

educoder平台实训html-web实训专栏收录该内容

30 篇文章 14 订阅

订阅专栏

educoder实训平台-----html5—表格高级样式的设置

第1关：表格高级样式设置相关概念
CABAD
第2关：设置表格的外边框样式

<html>
 <head>
  <meta charset="utf-8"/>
  <title>设置表格外边框属性</title>
 </head>
  <body>
   <!-- ********* Begin ******* -->
   <table width="100" height="80" border="4" frame="hsides">
   
    <!-- ********* End ********* -->
    <caption>简易信息表</caption> 
    <tr align=center  valign=middle>
      <th>姓名</th>
      <th>年龄</th>
    </tr>
    <tr  align=center  valign=middle>
      <td>张三</td>
      <td>20</td>
    </tr>
   </table>
  </body> 
</html>

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

<html>
 <head>
  <meta charset="utf-8"/>
  <title>设置表格内边框属性</title>
 </head>
  <body>
   <!-- ********* Begin ******* -->
   
   <table width="100" height="80" border="4" frame="hsides" rules="rows">
    <!-- ********* End ********* -->
    <caption>简易信息表</caption> 
    <tr align=center  valign=middle>
      <th>姓名</th>
      <th>年龄</th>
    </tr>
    <tr  align=center  valign=middle>
      <td>张三</td>
      <td>20</td>
    </tr>
   </table>
  </body> 
</html>

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

<!DOCTYPE html>
<html>
 <head>
    <meta charset="UTF-8">
    <title>签到表</title>
    <style type="text/css">
       th{background-color:#00ff33;}
       td{background-color:#00ffff;}
    </style>
 </head>
 <body> 
    <table border="2" width="400" bordercolor="#00ff00" cellpadding="6">
        <caption>签到表</caption>
        <tr>
        <th rowspan="2">姓名</th>
        <th colspan="2">签到</th>
        <th rowspan="2">备注</th>
        </tr>
        <tr>
           <th>第1次</td>
           <th>第2次</td>
        </tr>
        <tr>
           <td>张三</td>
           <td></td>
           <td></td>
           <td></td>
        </tr>
    </table>   
 </body>
</html>

第5关：表格的综合案例

<!DOCTYPE html>
<html>
 <head>
    <meta charset="UTF-8">
    <title>表格综合</title>
    <style type="text/css">
       th{background-color:#00ff33;}
       td{background-color:#00ffff;text-align:center}
       caption{font-family:黑体;font-size:30px;color:blue}
    </style>
 </head>
<!-- ********* Begin ********* -->
<body background="https://www.educoder.net/api/attachments/1217848">
 <table width="600" cellpadding="6" align="center" bordercolor="#00ff00" border="2">
 <caption>家庭账单</caption>
   <tr>
      <th colspan="2" rowspan="2">本周项目</th>
      <th colspan="2">费用明细</th>
      <th rowspan="2">备注</th>
 </tr>
 <tr>
      <th>收入</td>
      <th>支出</td>
 </tr>
  <tr>
     <th rowspan="3">收入</td>
      <th>工资</td>
      <td>10000</td>
      <td>0</td>
      <td></td>
 </tr>
  <tr>
      <th>兼职</td>
      <td>2000</td>
      <td>0</td>
      <td></td>
 </tr>
  <tr>
      <th>收入合计</td>
      <td>12000</td>
      <td>0</td>
      <td></td>
 </tr>
     <tr>
        <th rowspan="3">支出</td>
      <th>生活用品</td>
      <td>0</td>
      <td>4000</td>
      <td></td>
 </tr>
     <tr>
      <th>学杂费</td>
      <td>0</td>
      <td>3000</td>
      <td></td>
 </tr>
     <tr>
      <th>支出合计</td>
      <td>0</td>
      <td>7000</td>
      <td></td>
 </tr>  
       
 </table>
</body>
<!-- ********* End ********* -->
</html>

白夜的月亮

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
educoder实训平台-----html5—表格高级样式的设置

educoder实训平台-----html5—表格高级样式的设置第1关：表格高级样式设置相关概念CABAD第2关：设置表格的外边框样式<html> <head> <meta charset="utf-8"/> <title>设置表格外边框属性</title> </head> <body>  <table wi
复制链接

扫一扫