网站推广.NET

网站推广.NET

html如何让表格直显示横线

来源:互联网

要让HTML表格显示横线,可以使用CSS样式,具体操作如下:

1、在<head>标签内添加<style>标签,用于编写CSS样式。

2、在<style>标签内,为<table><th><td>元素分别设置边框样式(borderstyle)。

3、使用bordercollapse: collapse;属性将表格的边框合并为一个单一的边框。

4、使用borderspacing: 0;属性设置单元格之间的间距为0。

以下是一个示例代码:

<!DOCTYPE html><html><head><style>  table {    bordercollapse: collapse;    width: 50%;  }  th, td {    border: 1px solid black;    padding: 8px;    textalign: left;  }  th {    backgroundcolor: #f2f2f2;  }</style></head><body><h2>小标题</h2><table>  <tr>    <th>表头1</th>    <th>表头2</th>  </tr>  <tr>    <td>单元格1</td>    <td>单元格2</td>  </tr>  <tr>    <td>单元格3</td>    <td>单元格4</td>  </tr></table></body></html>

在这个示例中,我们为<table><th><td>元素设置了边框样式,并使用bordercollapse: collapse;borderspacing: 0;属性让表格显示横线。

bordercollapse