利用HTML技术使用表格标签完成数据的展示

最新推荐文章于 2024-04-26 15:36:17 发布

会点魔法呀

最新推荐文章于 2024-04-26 15:36:17 发布

阅读量494

点赞数

分类专栏： HTML、js、css 文章标签： html css 前端

本文链接：https://blog.csdn.net/whyszan/article/details/130265945

版权

HTML、js、css 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

请按照要求使用表格标签完成如下页面效果请添加图片描述
提示：

根据上图所示应该定义 5行5列的表格
图片列 需要在 td 标签中嵌套 img 标签
操作列 需要在 td 标签中嵌套两个按钮
按钮使用 <input type="button"> 定义，并使用 value 属性给按钮设置按钮上显示的文字

<html lang="en">
<head>
    <meta charset="UTF-8">
  <title>隔行换色</title>
    <style>
    th,td {
      border-bottom: 1px #C0C0C0 solid;
      height: 40px;
      font-family: 楷体;
      width: 200px;
      text-align: center;
    }
    td input[type] {
      width: 80px;
      height: 30px;
    }
    th {
      background-color: #DEE3E6;
    }
    td {
      background-color: #F5F5F5;
    }
    td img {
      width: 50px;
      height: 50px;
    }
  </style>
</head>
<body>
  <!--在此处定义表格-->
    <table>
    <tr>
      <td>编号</td> 
      <td>图像</td> 
      <td>姓名</td> 
      <td>地址</td> 
      <td>操作</td> 
    </tr>
    <tr>
      <td>1</td>
      <td><img src="./img/autor.jpg"></td>
      <td>张三</td>
     <td>西安</td>
      <td>
        <input type="button" value="修改">
        <input type="button" value="删除">
      </td>
    </tr>
    <tr>
      <td>2</td>
      <td><img src="./img/autor2.jpg"></td>
      <td>李四</td>
      <td>武汉</td>
      <td>
        <input type="button" value="修改">
        <input type="button" value="删除">
      </td>
    </tr>
    <tr>
      <td>3</td>
      <td><img src="./img/autor3.jpg"></td>
      <td>王五</td>
      <td>北京</td>
      <td>
        <input type="button" value="修改">
        <input type="button" value="删除">
      </td>
    </tr>
    <tr>
      <td>4</td>
      <td><img src="./img/autor.jpg"></td>
      <td>赵六</td>
      <td>上海</td>
      <td>
        <input type="button" value="修改">
        <input type="button" value="删除">
      </td>
    </tr>
    <tr>
      <td>5</td>
      <td><img src="./img/autor2.jpg"></td>
      <td>田七</td>
      <td>深圳</td>
      <td>
        <input type="button" value="修改">
        <input type="button" value="删除">
      </td>
    </tr>
  </table>
</body>
</html>