第十章 创建表格

10.2.1 <table>元素

  表格中所有元素都放在<table>里面

10.2.3 行和单元格

  <th>.....</th> 用于创建表头单元格，就像一个表格中有姓名这个表头

  <td>.....</td>表格里面的数据，就行姓名下的“张三”

  <tr>......</tr>代表了一行

所以，基本的框架是

 

<tr>
  <th>
      <td>...</td>
      <td>...</td>
      <td>...</td>
  </th>
</tr>

空单元格就是<td>...<td>里面什么都不填h

10.2.5 表题  

<caption>....</caption>

中间加上表格的名字

<caption>
  <details>
    <summary>This is a small demo</summary>
    <p>这里是被隐藏的内容</p>
  </details>
</caption>

<details>和<summary>合用，效果是隐藏一些说明性的内容，具体见

点击打开链接

10.3 设置表格、边框和单元格的尺寸

10.3.1 设置表格的宽度

  

<table border="1" style="width:100%;">

一般都是用百分比lai设置而不是用像素来设置，因为这样更容易操控表格相对于网页的大小

10.2.2修改表格的边框

 在HTML5中将表格设计布局是不太理想的做法，但是对以下属性进行一些改变就可以了：

 . 将属性role的值设置成presentation

 . 将属性border设置成0

 . 将属性cellspacing和cellpadding 设置成0

 

<table border="1px solid black;">

这样设置，表格外围就会出现宽为1px的边框

如果你要表格中每个单元格都有边框，那么可以设置样式表：

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

如果出现像上面这样每个单元格之间有空隙，那么就要用到属性border-collapse,它人有两个值separate和collapse,

默认的是separate,所以只要

<table>
  border-collapse:collapse;
</table>