HTML之表格制作1

丽绮

已于 2022-04-14 11:53:58 修改

阅读量125

点赞数

分类专栏： HTML 文章标签： vscode

于 2022-04-14 11:46:55 首次发布

本文链接：https://blog.youkuaiyun.com/qq_59861678/article/details/124168272

版权

HTML 专栏收录该内容

6 篇文章

订阅专栏

本文介绍了HTML中如何创建和设计表格，包括基本的表格元素如`<table>`, `<tr>`, `<th>`, 和 `<td>`的使用，以及如何设置表格样式和布局。通过实例演示，帮助读者掌握HTML表格制作的基本技巧。" 121360973,10692591,二叉树与堆的原理与应用,"['二叉树', '数据结构', '算法', '堆', '排序']

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>第六章1</title>
    <style type="text/css">
        .row{   
            background-color:darkgoldenrod;   /*单元格背景颜色*/  
        }
        .rown{
            background-color: darkkhaki;
        }

    </style>
</head>
<body>
    <table border="1" width="600" height="300" align="left" cellspacing="0">  <!-- border="1"代表边框粗细,cellspacing="0"代表框与框之间的距离-->
        <tr align="center" class="row">
            <td width="100" height="50">网名</td>
            <td>微博</td>
            <td>email</td>
            <td>QQ</td>
        </tr>
        <tr class="rown">
            <td>张三</td>
            <td>http://t.qq.com/zhangsan</td>
            <td>zhangsan@163.com</td>
            <td>123456789</td>
        </tr>
        <tr class="rown">
            <td>李四</td>
            <td>http://t.qq.com/lisi</td>
            <td>lisi@163.com</td>
            <td>123456789</td>
        </tr>
        <tr class="rown">
            <td>王五</td>
            <td>http://t.qq.com.wangwu</td>
            <td>wangwu@162.com</td>
            <td>123456789</td>
        </tr>
        <tr class="rown">
            <td>马六</td>
            <td>http://t.qq.com/maliu</td>
            <td>maliu@163.com</td>
            <td>123456789</td>
        </tr>
        <tr class="rown">
            <td>迈克</td>
            <td>http://t.qq.com.maike</td>
            <td>maike@163.com</td>
            <td>123456789</td>
        </tr>

    </table>
</body>
</html>