骑着蜗牛狂奔 发表于 2019-3-20 06:43:34

我的表格为什么和视频的中演示的结果不一样?

<!DOCTYPE html>
<html>
<head>
        <meta charset = "utf-8"/>
        <title> 表格</title>
        <style>
                table{
                        border:1px solid black;
                        border-collapse:collapse;
                }
                th{
                        border:1px solid black;
                        background:grey;
                        color:white;
                }
                td{
                        border:1px solid black;
                }
                table, th, td{
                        padding:5px;
                }
        </style>
</head>
<body>

                <table>
                        <caption>复仇者联盟主要成员技能表</caption>
                        <tr>
                                <th>外号</th>
                                <th>原名</th>
                                <th>特长</th>
                                <th>照片</th>
                        </tr>
                        <tr>
                                <td>美国队长</td>
                                <td>史蒂芬·罗杰斯</td>
                                <td>强化体格</td>
                                <td><img src="../img/CaptainAmerica.jpg" alt="史蒂芬·罗杰斯" width="300"/></td>
                        </tr>
                        <tr>
                                <td>钢铁侠</td>
                                <td>托尼·斯塔克</td>
                                <td>有钱</td>
                                <td><img src="../img/IronMan.jpg" alt="托尼·斯塔克" width = "300"/></td>
                        </tr>
                        <tr>
                                <td>雷神</td>
                                <td>托尔</td>
                                <td>操控雷电</td>
                                <td><img src="../img/Thor.jpg" alt="托尔" width="300"/></td>
                        </tr>
                        <tr>
                                <td>绿巨人</td>
                                <td>布鲁斯·班纳</td>
                                <td>变大变强</td>
                                <td><img src="../img/Hulk.jpg" alt="布鲁斯·班纳" width= "300"/></td>
                        </tr>
                        <tr>
                                <td>黑寡妇</td>
                                <td>娜塔莎·罗曼诺夫</td>
                                <td>性感</td>
                                <td><img src="../img/BlackWidow.jpg" alt="布鲁斯·班纳" width="300"/></td>
                        </tr>
               
                </table>

</body>
</html>





在小甲鱼老师的视频 表格的列也是变色的我的这个为什么不变色?

不二如是 发表于 2019-3-20 06:43:35

1、课程中,先通过CSS添加的如下背景:

骑着蜗牛狂奔 发表于 2019-3-20 22:48:17

不二如是 发表于 2019-3-20 06:43
1、课程中,先通过CSS添加的如下背景:

谢谢,不二老师{:10_284:}

骑着蜗牛狂奔 发表于 2019-3-21 21:34:06

不二如是 发表于 2019-3-20 06:43
1、课程中,先通过CSS添加的如下背景:

<!DOCTYPE html>
<html>
<head>
    <title>复仇者联盟主要成员技能表</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="keywords" content="小甲鱼,Web开发,HTML5,CSS3,Web编程教学">
    <meta name="description" content="《零基础入门学习Web开发》案例演示">
    <meta name="author" content="小甲鱼">
    <style>
      table {
            border: 1px solid black;
            border-collapse: collapse;
      }
      /* 将 th 元素的背景色设置为 grey */
      th {
            background: grey;
            color: white;
      }
      th, td {
            border: 1px solid black;
            padding: 5px;
      }
      caption {
            padding: 10px;
      }
    </style>
</head>
<body>
    <table>
      <caption>复仇者联盟主要成员技能表</caption>
    <thead>
      <tr>
            <th>外号</th>
            <th>原名</th>
            <th>特长</th>
            <th>照片</th>
      </tr>
    </thead>
    <tbody>
      <tr>
            <th>美国队长</th>
            <td>史蒂芬·罗杰斯</td>
            <td>强化体格</td>
            <td><img src="img/CaptainAmerica.jpg" alt="美国队长" width="300"></td>
      </tr>
      <tr>
            <th>钢铁侠</th>
            <td>托尼·斯塔克</td>
            <td>有钱</td>
            <td><img src="img/IronMan.jpg" alt="钢铁侠" width="300"></td>
      </tr>
      <tr>
            <th>雷神</th>
            <td>托尔</td>
            <td>操控雷电</td>
            <td><img src="img/Thor.jpg" alt="雷神" width="300"></td>
      </tr>
      <tr>
            <th>绿巨人</th>
            <td>布鲁斯·班纳</td>
            <td>变大变强</td>
            <td><img src="img/Hulk.jpg" alt="绿巨人" width="300"></td>
      </tr>
      <tr>
            <th>黑寡妇</th>
            <td>娜塔莎·罗曼诺夫</td>
            <td>性感</td>
            <td><img src="img/BlackWidow.jpg" alt="黑寡妇" width="300"></td>
      </tr>
    </tbody>      
    </table>
</body>
</html>


这个里面没有发现有背景的设置呀为什么第一竖列也显示灰色?第一竖列不应该属于td标签吗?

骑着蜗牛狂奔 发表于 2019-3-21 21:55:11

不二如是 发表于 2019-3-20 06:43
1、课程中,先通过CSS添加的如下背景:

明白了,看的不够仔细{:5_104:}
页: [1]
查看完整版本: 我的表格为什么和视频的中演示的结果不一样?