web程序设计（前端）实验一——表格设计

最新推荐文章于 2024-11-22 09:30:58 发布

巧了，我也不会

最新推荐文章于 2024-11-22 09:30:58 发布

阅读量2.3k

点赞数

文章标签： html css3

本文链接：https://blog.csdn.net/weixin_41879980/article/details/104525744

版权

（1）、定义一个带边框的表格，表格的内容分别为本专业的3门课程的信息，列标签包括：课程名称、授课老师、学分、理论课学时、实验课学时，授课年级，同时采用CSS控制指定单元格边距和单元格间距。
（2）、根据下面的xls表格设计相应的网页表格。
注意：①表格中文字的对齐方式，采用CSS控制：②表格线尽量控制得与下图的一致。
在这里插入图片描述
程序运行效果图：

某房地产信息中心第（7）期报价数据

报价日期：2007年7月10日

某城市房地产信息中心第（7）期报价数据

			本期		上期
分类	商品名称	单位	最高成交价	集中成交价	最高成交价	集中成交价
商品楼	城市中心地段	元/平方米	10846	9750	12475	11000
	城市一般地段	元/平方米	7416	6900	7749	6900
	城近郊区地段	元/平方米	7819	6700	7166	6550
写字楼	高档写字楼	元/平方米	23594	20200	23628	19250
写字楼	写字楼	元/平方米	20202	15650	18000	15500

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>某房地产信息中心第（7）期报价数据</title>
    <style type="text/css">
        table{
            border-collapse: collapse;
            table-layout: fixed;
            empty-cells: show;
            margin: 0 auto;}
        table,td,th{border: 2px solid black;
            text-align: center;}
        th{ padding: 0 1em 0;}
        p.warning{
            text-align: center;}
        div{height: 100px;
            width: 700px;}
        .right1{text-align: right;}
        .left1{text-align: left;}
    </style>
</head>
<body>
<div>
    <p>报价日期：2007年7月10日</p>
    <p class="warning">某城市房地产信息中心第（7）期报价数据</p>
    <table>
        <tr>
            <th></th>
            <th></th>
            <th></th>
            <th colspan="2">本期</th>
            <th colspan="2">上期</th>
        </tr>
        <tr>
            <th>分类</th>
            <th>商品名称</th>
            <th>单位</th>
            <th>最高成交价</th>
            <th>集中成交价</th>
            <th>最高成交价</th>
            <th>集中成交价</th>
        </tr>
        <tr>
            <td rowspan="3">商品楼</td>
            <td class="left1">城市中心地段</td>
            <td>元/平方米</td>
            <td class="right1">10846 </td>
            <td class="right1">9750 </td>
            <td class="right1">12475 </td>
            <td class="right1">11000 </td>
        </tr>
        <tr>
            <td class="left1">城市一般地段</td>
            <td>元/平方米</td>
            <td class="right1">7416 </td>
            <td class="right1">6900 </td>
            <td class="right1">7749 </td>
            <td class="right1">6900 </td>
        </tr>
        <tr>
            <td class="left1">城近郊区地段</td>
            <td>元/平方米</td>
            <td class="right1">7819 </td>
            <td class="right1">6700 </td>
            <td class="right1">7166 </td>
            <td class="right1">6550 </td>
        </tr>
        <tr>
            <td rowspan="2">写字楼</td>
            <td class="left1">高档写字楼</td>
            <td>元/平方米</td>
            <td class="right1">23594 </td>
            <td class="right1">20200 </td>
            <td class="right1">23628 </td>
            <td class="right1">19250 </td>
        </tr>
        <tr>
            <td class="left1">写字楼</td>
            <td>元/平方米</td>
            <td class="right1">20202 </td>
            <td class="right1">15650 </td>
            <td class="right1">18000 </td>
            <td class="right1">15500 </td>
        </tr>
    </table>
</div>
</body>
</html>
```java