HTML Tables

最新推荐文章于 2024-07-12 11:17:24 发布

_一克拉的梦想_

最新推荐文章于 2024-07-12 11:17:24 发布

阅读量569

点赞数

分类专栏：复习笔记 HTML 文章标签： Tables

本文链接：https://blog.csdn.net/u013960094/article/details/23605463

版权

复习笔记同时被 2 个专栏收录

33 篇文章 0 订阅

订阅专栏

HTML

19 篇文章 0 订阅

订阅专栏

HTML Tables

Tables are defined with the <table> tag.

The <tr> element defines a table row 表格行, the <th> element defines a table header 表头, and the <td> element are the data container of the table 单元格.

The <td> elements can contain all sorts of HTML elements like text, images, lists, other tables, etc.

单元格可包含各种HTML元素：文本、图片、列表、其他表等。

The width of a table can be defined using CSS. 可以通过CSS设定表格宽度

The text in <th> elements are bold and centered by default. 默认：粗体中间对齐

The text in <td> elements are regular and left-aligned by default. 默认：正常字体左对齐

<table style="width:300px">
<tr>
  <th>Firstname</th>
  <th>Lastname</th> 
  <th>Points</th>
</tr>
<tr>
  <td>Eve</td>
  <td>Jackson</td> 
  <td>94</td>
</tr>
</table>

Table with a Border Attribute

If you do not specify a border for the table, it will be displayed without borders.

如果不设置表格的border，则默认显示的是无边框表格，通过CSS设置border

<style>
table,th,td
{
border:1px solid black;
}
</style>

Table with Collapsed Borders

合并边框模型，将边框会合并为单一的边框，相对于上面的例子。

<style>
table,th,td
{
border:1px solid black;
border-collapse:collapse
}
</style>

Table with Cell Padding

Cell padding specifies the space between the cell content and its borders.

单元格内边距定义了单元格内容和边框的空隙。如果不特别设定，则默认以无内边距显示。

通过CSS设定单元格内边距：

th,td
{
padding:15px;
}

Table with Border Spacing

Use the CSS border-spacing property to set the space between the cells.

设置单元格间距

table
{
border-spacing:5px;
}

Examples：

1. 竖直显示表头

<table>
<tr>
  <th>Name:</th>
  <td>Bill Gates</td>
</tr>
<tr>
  <th>Telephone:</th>
  <td>555 77 854</td>
</tr>
<tr>
  <th>Telephone:</th>
  <td>555 77 855</td>
</tr>
</table>

2. 设置表格标题

<table>
  <caption>Monthly savings</caption>
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>January</td>
    <td>$100</td>
  </tr>
  <tr>
    <td>February</td>
    <td>$50</td>
  </tr>
</table>

3. 单元格列扩展 colspan ：specifies the number of columns a cell should span

<table>
<tr>
  <th>Name</th>
  <th colspan="2">Telephone</th>
</tr>
<tr>
  <td>Bill Gates</td>
  <td>555 77 854</td>
  <td>555 77 855</td>
</tr>
</table>

4. 单元格行扩展 rowspan ：sets the number of rows a cell should span

<table style="width:100%">
  <tr>
    <th>Name:</th>
    <td>Bill Gates</td>
  </tr>
  <tr>
    <th rowspan="2">Telephone:</th>
    <td>555 77 854</td>
  </tr>
  <tr>
    <td>555 77 855</td>
  </tr>
</table>