关于HTML中的<table>表格标签的说明及常用选项

<table> 标签定义 HTML 表格。简单的 HTML 表格由 table 元素以及一个或多个 tr、th 或 td 元素组成。

其中  tr 元素定义表格行，th 元素定义表头，td 元素定义表格单元。（一般来说 th和td应该是在tr标签内部）

<th>标签对，作为表头，从视觉效果上来看，只是字体显示上，是剧中加粗，当然一个表格，也可以没有<th>标签的

<table border=1>
  <tr>
    <th>表头字段1</th>
    <th>表头字段1</th>
  </tr>
  <tr>
    <td>表行一：单元格1</td>
    <td>表行一：单元格2</td>
  </tr>
  <tr>
    <td>表行二：单元格1</td>
    <td>表行二：单元格2</td>
  </tr>
</table>

注：<table>标签如果不加border边框属性，其值为0, 下方就看不到任何边框信息，加上后，效果如下：

可以看出来 表下面是 <tr> 行， 每一行由<td> 单元格表示

每一个td都是独立的，看起来单元框之间是有边距的，还有一个非常常用的属性，可以去掉这个边距

注意：需要在 <table>标签上添加属性，完整的写法如下：

<table border=1 cellspacing=0>
  <tr>
    <th>表头字段1</th>
    <th>表头字段1</th>
  </tr>
  <tr>
    <td>表行一：单元格1</td>
    <td>表行一：单元格2</td>
  </tr>
  <tr>
    <td>表行二：单元格1</td>
    <td>表行二：单元格2</td>
  </tr>
</table>

这样的效果就更像一个真正的表格了，如下所示：

 

也可以使用 CSS内部 ‌内联样式 的方法，设置 表格中元素的样式

<table border=1 cellspacing=0>
  <tr>
    <th style="background-color: #A0CBF2; font-weight: 600; border: 1px solid #ff0000;">表头字段1</th>
    <th style="background-color: #A0CBF2; font-weight: 600; border: 1px solid #ff0000;">表头字段1</th>
  </tr>
  <tr>
    <td>表行一：单元格1</td>
    <td>表行一：单元格2</td>
  </tr>
  <tr>
    <td>表行二：单元格1</td>
    <td>表行二：单元格2</td>
  </tr>
</table>

再看看效果：

 

 

 

尊重别人的劳动成果 转载请务必注明出处：https://www.cnblogs.com/5201351/p/19210130