案例注意事项:

1.注意背景图片不需要用img实现,因为img标签中的title是鼠标悬停在图片上的时候显示的内容。

实现效果图:

html实现NBA总决赛统计表_td

代码:

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Document</title>

    <style>

        .bkmaci{

            width: 50px;

            background-image:url(https://t7.baidu.com/it/u=1092574912,855301095&fm=193&f=GIF) ;

        }

        .rehuo{

            background-size: auto;

            background-image:url(https://t7.baidu.com/it/u=1620952818,4218424235&fm=193&f=GIF);

        }

    </style>

</head>

<body>

    <table border="5px" align="center" cellspacing="2px" cellpadding="8px">

        <tr align="center">

            <td width="100px">球队</td>

            <td width="100px">球员</td>

            <td width="100px">夺冠次数</td>

        </tr>

        <tr align="center" bgcolor="lightgray">

            <td rowspan="3" class="bkmaci">马刺队</td>

            <td>邓肯</td>

            <td rowspan="3">5次</td>

        </tr>

        <tr align="center" bgcolor="lightgray">

            <td>帕克</td>

        </tr>

        <tr align="center" bgcolor="lightgray">

            <td>吉诺比利</td>

        </tr>

        <tr align="center" bgcolor="lightpink">

            <td rowspan="3" class="rehuo">烈火队</td>

            <td>詹姆斯</td>

            <td rowspan="3" >3次</td>

        </tr>

        <tr align="center" bgcolor="lightpink">

            <td>韦德</td>

        </tr>

        <tr align="center" bgcolor="lightpink">

            <td>波什</td>

        </tr>

        <tr>

            <td colspan="3">比赛解说:黄健翔、姚明</td>

        </tr>

    </table>

</body>

</html>