html实现原生table并设置表格边框的两种方式

2024年 6月 11日 39.2k 0

在HTML中实现原生表格并设置表格边框的两种方式如下:

方式一:使用HTML表格边框属性

使用HTML的表格边框属性可以直接设置表格的边框样式。

示例代码:

<table border="1">
  <tr>
    <th>表头1</th>
    <th>表头2</th>
    <th>表头3</th>
  </tr>
  <tr>
    <td>单元格1</td>
    <td>单元格2</td>
    <td>单元格3</td>
  </tr>
  <tr>
    <td>单元格4</td>
    <td>单元格5</td>
    <td>单元格6</td>
  </tr></table>

在上述代码中,
border="1"属性将设置表格的边框为实线。

方式二:使用CSS样式设置表格边框

使用CSS样式可以更灵活地控制表格的边框样式,包括线条样式、颜色、粗细等。

示例代码:

<style>
  table {    border-collapse: collapse;
  }  table, th, td {    border: 1px solid black;
  }</style><table>
  <tr>
    <th>表头1</th>
    <th>表头2</th>
    <th>表头3</th>
  </tr>
  <tr>
    <td>单元格1</td>
    <td>单元格2</td>
    <td>单元格3</td>
  </tr>
  <tr>
    <td>单元格4</td>
    <td>单元格5</td>
    <td>单元格6</td>
  </tr></table>

在上述代码中,通过CSS样式设置 
border-collapse: collapse;将表格边框合并为单一边框,而 
border: 1px solid black;设置每个单元格的边框为1像素的实线黑色。

这两种方式都可以用来实现带有边框的原生HTML表格,你可以根据需要选择适合的方式。

相关文章

服务器端口转发,带你了解服务器端口转发
服务器开放端口,服务器开放端口的步骤
产品推荐:7月受欢迎AI容器镜像来了,有Qwen系列大模型镜像
如何使用 WinGet 下载 Microsoft Store 应用
百度搜索:蓝易云 – 熟悉ubuntu apt-get命令详解
百度搜索:蓝易云 – 域名解析成功但ping不通解决方案

发布评论