学长学姐们,这个实验怎么写啊

1.HTML,实现如图11-12所示页面效果。要求使用CSS样式表统一定table 和td标记样式,分别如下:
table标记样式:边框为8px、线型为双线、颜色为#0000两个f
td标记样式:边框为lpx、线型为solid、颜色为black、水平居中对齐。
两个嵌套表格背景颜色分别为#三个fee 和#三个fe
外表宽度为300px、居中对齐、单元间距和单元格边距均为0。
两个子表宽度为80%、居中对齐、边框为1px。
2.采用表格布局完成CASIO 计算器外观设计,其中表格的每一个单元格均需要补带边框,效果如图11-13所示。

img

好搞
计算器

<!DOCTYPE html>
<html lang="en">
<head>
    <title>CASIO计算器</title>
    <style>
        table {
            border-collapse: collapse;
            margin: 0 auto;
        }
        td {
            border: 1px solid black;
            padding: 10px;
            text-align: center;
            font-size: 20px;
            font-family: Arial, sans-serif;
            background-color: #f2f2f2;
        }
        #display {
            background-color: #d9d9d9;
            font-size: 30px;
            font-weight: bold;
            text-align: right;
            padding-right: 10px;
        }
        #clear {
            background-color: #ff6666;
            color: white;
            font-weight: bold;
        }
        #equals {
            background-color: #66cc66;
            color: white;
            font-weight: bold;
        }
        #operators td {
            background-color: #b3b3b3;
            font-weight: bold;
        }
        #numbers td {
            background-color: #e6e6e6;
        }
    </style>
</head>
<body>
<table>
    <tr>
        <td colspan="4" id="display">0</td>
    </tr>
    <tr id="operators">
        <td>AC</td>
        <td>+/-</td>
        <td>%</td>
        <td>/</td>
    </tr>
    <tr class="numbers">
        <td>7</td>
        <td>8</td>
        <td>9</td>
        <td>*</td>
    </tr>
    <tr class="numbers">
        <td>4</td>
        <td>5</td>
        <td>6</td>
        <td>-</td>
    </tr>
    <tr class="numbers">
        <td>1</td>
        <td>2</td>
        <td>3</td>
        <td>+</td>
    </tr>
    <tr class="numbers">
        <td colspan="2">0</td>
        <td>.</td>
        <td id="equals">=</td>
    </tr>
</table>
</body>
</html>