html table第一列不向左滚动_HTML 表格元素

HTML 表格定义

• HTML表格标签用于以表格形式(行*列)显示数据，一行中可以有很多列。

• 我们可以用

  ，和元素创建表格。

• 在每个表中，表格由

  定义，表数据由	标记定义。

• 指表格数据(table data)，即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。

  提示：HTML表格可以管理页面的布局，例如标题部分，导航栏，正文内容，页脚部分等。但是建议使用div标签来管理页面的布局。

  HTML 表格示例:

  班级	姓名	分数
  五年级1班	王维	99
  五年级2班	赵高	94
  五年级2班	李晨	90
  五年级3班	陈霞	87

  ---

  HTML 表格边框属性

  如果不定义边框属性，表格将不显示边框。有时这很有用，但是大多数时候，我们希望显示边框。有两种方法可以为HTML表指定边框：

  1. 通过HTML中表格的边框属性设定

  2. 通过CSS中的边框属性设定

  使用HTML边框属性来显示一个带有边框的表格：

  <table border="1">
  <tr>
  <td>第一行, 第一列td>
  <td>第一行, 第二列td>
  tr>
  <tr>
  <td>第二行, 第一列td>
  <td>第二行, 第二列td>
  tr>
  table>

  效果展示：

  

  使用CSS的边框属性来显示一个带有边框的表格，且添加边线合并属性border-collapse：

  <style>  table, th, td {  border: 2px solid black;  border-collapse: collapse;  }  style> 
  <table>
  <tr>
  <td>第一行, 第一列td>
  <td>第一行, 第二列td>
  <tr>
  <td>第二行, 第一列td>
  <td>第二行, 第二列td>
  tr>
  tr>
  table>

  效果展示：

  

  ---

  HTML表格内边距属性

  您可以通过两种方式为表头和表数据设定内边距：

  1. 使用HTML中表格的cellpadding属性。

  2. 使用在CSS中内边距属性padding。

  HTML table标记的cellpadding属性现在已过时，建议使用CSS。

  <style>    table, th, td {         border: 2px solid green; border-collapse: collapse;     }     th, td {         width:100px;padding: 15px;     }style>

  效果展示：

  

  ---

  HTML单元格合并属性

  如果一个单元格跨度超过一行我们可以使用rowspan合并单元格，同样如果单元格跨度超过一列，我们可以使用colspan属性合并单元格。

  让我们看一下跨两行的示例：

  <table>
  <tr>
  <th>班级th>
  <th>姓名th>
  <th>分数th>tr>
  <tr>
  <td >五年级1班td>
  <td>王维td>
  <td>99td>tr>
  <tr>
  <td rowspan="2">五年级2班td>
  <td>赵高td>
  <td>94td>tr>
  <tr>
  <td>李晨td>
  <td>90td>tr>
  <tr>
  <td>五年级3班td>
  <td>陈霞td>
  <td>87td>tr>
  table>

  效果展示：

  

  ---

  HTML表格奇偶单元格样式

  为了提升表格的可读性和视觉效果，我们可以把表格的奇偶行展示不同的样式。

  <style>  table, th, td {  border: 2px solid green;  border-collapse: collapse;  }  th, td {  width:100px;height:30px;padding: 15px;  }  table#alter tr:nth-child(even) {  background-color:yellow;  }  table#alter tr:nth-child(odd) {  background-color:white;  }  table#alter th {  color: white;  background-color: gray;  } style>  
  <table id="alter">
  <tr>
  <th>班级th>
  <th>姓名th>
  <th>分数th>tr>
  <tr>
  <td>五年级1班td>
  <td>王维td>
  <td>99td>tr>
  <tr>
  <td>五年级2班td>
  <td>赵高td>
  <td>94td>tr>
  <tr>
  <td>五年级2班td>
  <td>李晨td>
  <td>90td>tr>
  <tr>
  <td>五年级3班td>
  <td>陈霞td>
  <td>87td>tr>
  table>

  效果展示：

  

  ---

  HTML 表格标签

  标签	描述
  	定义表格
  		定义表格的表头
  定义表格的行
  		定义表格单元
  	定义用于表格列的属性