0
点赞
收藏
分享

微信扫一扫

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

精进的医生 2022-11-25 阅读 91
html5htmlcss

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

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

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

<html>
<head>
  <meta charset="utf-8"/>
  <title>设置表格外边框属性</title>
</head>
<body>
<!-- ********* Begin ******* -->
<table border="4" width="100" height="80" 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关_设置表格的内边框样式 

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

<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关_表格中单元格的合并

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

 

<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>

第5关_表格的综合案例

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

<!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 border="2" width="600" bordercolor="#00ff00" cellpadding="6" align="center" valign="middle">
    <caption>家庭账单</caption>
    <tr>
        <th rowspan="2" colspan="2">本周项目</th>
        <th colspan="2">费用明细</th>
        <th rowspan="2">备注</th>
    </tr>
    <tr>
        <th>收入</th>
        <th>支出</th>
    </tr>
    <tr>
        <th rowspan="3">收入</th>
        <th>工资</th>
        <td>10000</td>
        <td>0</td>
        <td></td>
    </tr>
    <tr>
        <th>兼职</th>
        <td>2000</td>
        <td>0</td>
        <td></td>
    </tr>
    <tr>
        <th>收入合计</th>
        <td>12000</td>
        <td>0</td>
        <td></td>
    </tr>
    <tr>
        <th rowspan="3">支出</th>
        <th>生活用品</th>
        <td>0</td>
        <td>4000</td>
        <td></td>
    </tr>
    <tr>
        <th>学杂费</th>
        <td>0</td>
        <td>3000</td>
        <td></td>
    </tr>
    <tr>
    <th>支出合计</th>
    <td>0</td>
    <td>7000</td>
    <td></td>
</tr>



</table>
</body>









<!-- ********* End ********* -->
</html>


 

 

举报

相关推荐

0 条评论