使用HTML表格实现不同元素的对齐方式-html教程-PHP中文网

使用HTML表格实现不同元素的对齐方式

DDD

发布： 2025-08-23 23:38:01

原创

957人浏览过

使用html表格实现不同元素的对齐方式

本文旨在指导开发者如何在一个HTML表格的同一行中实现不同元素的对齐方式，例如将文本内容居中，同时将编辑图标放置在最右侧。文章将提供详细的HTML和CSS代码示例，并解释如何利用Bootstrap框架简化实现过程，最终达到美观且功能完善的表格布局。

使用HTML表格实现不同元素的对齐方式

在HTML表格中，经常需要对同一行中的不同元素应用不同的对齐方式。例如，可能希望将文本内容居中显示，而将操作按钮（如编辑图标）放置在行尾。以下是如何使用HTML和CSS实现这种效果的详细步骤。

1. HTML 结构

首先，我们需要构建基本的HTML表格结构。在这个例子中，我们使用了一个包含多个行的表格，每一行包含一个标题和一个数据单元格。关键在于，为了实现不同的对齐方式，我们会在数据单元格中再添加一个单元格来放置编辑图标。

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0/dist/css/bootstrap.min.css" rel="stylesheet"/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css" integrity="sha512-KfkfwYDsLkIlwQp6LFnl8zNdLGxu9YAA1QvwINks4PhcElQSvqcyVLLD9aMhXd13uQjoXtEKNosOWaZqXgel0g==" crossorigin="anonymous" referrerpolicy="no-referrer" />

<div style="
          margin-top: 2rem;
          display: flex;
          justify-content: center;
          align-content: center;
          padding-right: 15rem;
          padding-left: 15rem;
          margin-bottom: 3rem;
        ">
  <table class="table table-striped table-hover" id="table">
    <tbody>
      <tr align="center">
        <th class="col-sm-4 text-center darkGrey" scope="row">ProfileUID :</th>
        <td>+178xxxxxx885</td>
        <td></td>
      </tr>
      <tr align="center">
        <th class="col-sm-4 text-center black" scope="row">First Name :</th>
        <td> +178xxxxxx885</td>
        <td></td>
      </tr>
      <tr align="center">
        <th class="col-sm-4 text-center darkGrey" scope="row">Email :</th>
        <td>+178xxxxxx885</td>
        <td></td>
      </tr>
      <tr align="center">
        <th class="col-sm-4 text-center black" scope="row">Profile Status :</th>
        <td>+178xxxxxx885</td>
        <td></td>
      </tr>
      <tr align="center">
        <th class="col-sm-4 text-center darkGrey" scope="row">Country Code :</th>
        <td>+178xxxxxx885</td>
        <td></td>
      </tr>
      <tr align="center">
        <th class="col-sm-4 text-center black" scope="row">Phone No. :</th>
        <td>+178xxxxxx885
          <!-- <div class="input-group input-group-sm col-xs-4"><input class="form-control inputlg" type="text" placeholder="Enter Value" name="value" id="value" /></div> -->
        </td>
        <td><button type="button" id="edit" onclick="edit()"><i class="fa-solid fa-square-pen fa-2x"></i></button></td>
      </tr>
      <tr align="center">
        <th class="col-sm-4 text-center darkGrey" scope="row"> Last Generated OTP : </th>
        <td>+178xxxxxx885</td>
        <td></td>
      </tr>
      <tr align="center">
        <th class="col-sm-4 text-center black" scope="row">Employee ID :</th>
        <td>+178xxxxxx885</td>
        <td></td>
      </tr>
      <tr align="center">
        <th class="col-sm-4 text-center darkGrey" scope="row">User ID :</th>
        <td>+178xxxxxx885</td>
        <td></td>
      </tr>
    </tbody>
  </table>
</div>

登录后复制

2. CSS 样式

接下来，我们使用CSS来控制表格的样式和对齐方式。关键的CSS规则如下：

科威旅游管理系统源码

系统前端采用可视化布局，能自动适应不同尺寸屏幕，一起建站，不同设备使用，免去兼容性烦恼。系统提供列表、表格、地图三种列表显示方式，让用户以最快的速度找到所需行程，大幅提高效率。系统可设置推荐、优惠行程，可将相应行程高亮显示，对重点行程有效推广，可实现网站盈利。系统支持中文、英文，您还可以在后台添加新的语言，关键字单独列出，在后台即可快速翻译。

150

查看详情

立即学习“前端免费学习笔记（深入）”；

table: 设置表格的边框、间距和最小宽度，并添加圆角边框。
.black, .darkGrey: 用于设置交替行的背景颜色，增加可读性。
table tr th: 设置表头文字颜色。
table tr th:first-child, table tr td:first-child: 设置第一列的边框样式。
table tr th:last-child, table tr td:last-child: 将最后一列（包含编辑图标）的文本对齐方式设置为右对齐，并添加内边距。
table tr th:nth-child(2), table tr td:nth-child(2): 设置第二列的内边距，使其内容居中，并添加左边框。
button: 移除按钮的默认边框和背景颜色，使其看起来更简洁。

<style>
button {
  border: none;
  background-color: transparent;
  color: #001872;
  padding: 9px 0px 5px 0px;
}

table {
  border-collapse: separate;
  border-spacing: 0;
  min-width: 350px;
  border: 1px solid rgb(0, 0, 0);
  border-radius: 20px 0px 20px 0;
  overflow: hidden;
}

.black {
  background: black;
}

.darkGrey {
  background: #262626;
}

table tr th {
  color: white;
}

table tr th:first-child,
table tr td:first-child {
  border-top: 2px solid black;
}

table tr th:last-child,
table tr td:last-child {
  text-align: right;
  padding: 0 10px;
  border-top: 2px solid black;
}

table tr th:nth-child(2),
table tr td:nth-child(2) {
  padding-left: 20%;
  border-left: 2px solid black;
  border-top: 2px solid black;
}

table tr:first-child th:first-child {
  border-top: none;
}

table tr:first-child td {
  border-top: none;
}
</style>

登录后复制