m0_62060445 2023-02-21 09:06 采纳率: 12.5%
浏览 53
已结题

请问这种表格怎么用HTML,CSS实现

img


请问这种表格怎么用HTML,CSS实现？基础三列表格上面两行均分两列，还请大家们指点。

  • 写回答

1条回答 默认 最新

  • 球球和皮皮 2023-02-21 10:36
    关注

    img

    <html>
<style>
    table {
        border-collapse: collapse;
          width: 270px;
    }
    td, th {
        border: 1px solid #ccc;
        padding: 8px;
        text-align: center;
          width: 90px;
    }
    th {
        background-color: #dfeff8;
        color: #1d78c5;
    }
</style>

<div>
<table>
  <tr>
    <th style="width: 50%">姓名</th>
    <td style="width: 50%">张三</td>
  </tr>
  <tr>
    <th style="border-bottom: none">部门</th>
    <td style="border-bottom: none">信息部</td>
  </tr>
</table>
<table>
  <tr>
    <th>本次消费</th>
    <th>本月消费</th>
    <th>余额</th>
  </tr>
  <tr>
    <td>10</td>
    <td>230</td>
    <td>700</td>
  </tr>
</table>
</div>
</html>
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论

报告相同问题？

  • css表格单元格中的长文本如何实现自动换行
    2020-12-13 10:22
    下面介绍的是CSS如何实现换行的方法 对于div,p等块级元素 正常文字的换行(亚洲文字和非亚洲文字)元素拥有默认的white-space:normal,当定义的宽度之后自动换行 html 复制代码代码如下: ”wrap”>正常文字的换行...
  • 【Web前端】CSS 样式化表格
    2024-08-30 14:56
    一条晒干的咸魚的博客 表格在网页设计中扮演了重要角色，尤其是在展示数据和信息时。尽管 HTML 表格提供了结构化的数据展示，但要使其看起来既美观又实用，CSS 样式化至关重要。
  • html+css+js实现京东商城
    2024-02-26 14:46
    在构建一个类似京东商城的网站时，HTML、CSS和JavaScript是三个核心的前端技术。...总的来说，"html+css+js实现京东商城"这个项目涵盖了前端开发的多个核心技能，是提升个人前端技术能力的良好实践。
  • 前端HTML和css新手学习
    2025-03-12 23:12
    随着进一步的学习，新手将会逐渐熟悉表单、列表、表格、图片、视频等各种HTML元素的使用，以及CSS布局、盒模型、定位、浮动、过渡、动画等高级特性。通过练习和项目实践，新手可以提升对网页前端开发的理解和能力。 ...
  • 原生html+css实现表格圆角效果
    2024-08-12 20:02
    会不会惊动山神的博客 有个需求需要用原生html+css的原生table标签实现圆角表格。有的方式圆角会很模糊，或者有毛边，查找资料+调整后实现了这个功能。
  • html+js+css 工人信息管理功能（增删改查）前端实现，不连数据库
    2020-12-09 10:41
    在本项目中，我们主要探讨的是使用HTML、JavaScript（JS）和CSS这三种核心技术来实现一个工人信息管理系统，特别强调了前端部分的功能实现，不涉及与数据库的交互。以下是这个项目涉及的关键知识点： 1. HTML基础：...
  • Web-前端html+css从入门到精通 126. 表格扩展学习.zip
    2022-05-23 10:38
    在Web开发领域，HTML...总之，掌握HTML表格和CSS的配合使用是前端开发者必备的技能之一。通过本课程的学习，你将能够熟练地创建和美化表格，以及了解其在实际项目中的高级应用，为你的Web开发之路打下坚实基础。
  • HTML使用CSS实现表格隔行变色
    2022-07-14 13:14
    2764150442的博客 HTML使用CSS实现table表格的隔行变色，要用到伪类:nth-child（）
  • HTML利用CSS选择器实现表格美化
    2022-08-18 16:26
    Meteor.792的博客 根据相应的DMO树结构，尝试对使用不同的选择器设置字体、背景、颜色等样式，验证和理解CSS的选择器。尝试对各元素设置不同的CSS样式，验证和理解CSS的继承、层叠特性及冲突处理。
  • 使用html5实现表格实现标题合并的实例代码
    2020-12-13 20:09
    使用html5实现表格实现标题合并的实例代码 这样的需求不在少数，比如表格中相邻的列具有相同的内容，那么标题就完全可以使用一个，那么合并标题就是十分重要的，让用户感觉也会更加人性化，代码实例如下: <!...
  • 没有解决我的问题, 去提问

问题事件

  • 系统已结题 3月1日
  • 已采纳回答 2月21日
  • 创建了问题 2月21日