【html】02--使用table表格标签

文章导读：

我们做表格使用table标签来承载

1、其中table标签中的属性

tr（table row）：表示行

td: 表示列

border 表示边框，表示一个像素

cellpadding 表示单元格边距

cellspacing 表示单元格间距

2、优化代码，建立代码结构

-------优化一下，一般我们正常的是情况是，头部不会修改，修改的是身体部分，所以用到下面俩，更方便

thead:表示列表的头

tbody：表示列表的身体

align（对齐）：默认左对齐的

3、表格是可以嵌套表格的

比如：table{

}

table tr{

}

4、th标签  定义表格内的表头单元格

HTML 表单中有两种类型的单元格：

表头单元格 - 包含表头信息（由 th 元素创建）

标准单元格 - 包含数据      （由 td 元素创建）

th 元素内部的文本通常会呈现为居中的粗体文本，而 td 元素内的文本通常是左对齐的普通文本。

---

首先我们从最简单的开始，了解表格的制作过程：

比如你想做一个简单的表格，跟平常一样的，首先我们先了解到表格用什么标签，接着用什么属性代表行，什么属性代表列，好，开始：

效果图如下：

1、建立行，一行一列，建立表的头部

2、继续建立行，建立列，增添信息

3、建立边框

建立了行，列，既然要表格，就要边框对吧，用到border（边界）

boeder="1"，相当于像素为1

4、解决边界线的间距问题

这时候你会发现有两个边框，原因是tr,td也显示出来了，为什么出来了等你有能力解决再说，现在问题是如何去掉，cellpadding（单元格边距） cellspacing（单元格间距）

---这样就会重合为一条线，即表格完成（但是颜色会区分开来，其实代表的还是两条线，如果想实实在在的成为一条线，这会运用到后面的知识CSS，在下面优化解决）

5、完善信息

与此类推，多建立几个行列，就会出来了

6、优化界面

表格的雏形已经出来，但是很不规范，宽度很窄，是以字体而建立的表格

cellpadding   补白，是指单元格内文字与边框的距离        cellspacing   间距，指单元格之间的距离

6.1、----加宽度，可以用width加宽，加到多少不用管，目前先加个800

6.2、----加高度，html的知识解决不了，没有height这个属性；用的是CSS，这个效果可以看一看（50有点高，30差不多）

6.3、-----字体居中，高宽解决差不多了，这个目前还得CSS实现

-----会发现，表格和字体同时居中了

---

       综上，我们已经完全可以解决一个简单的表格制作了，我们再进行一次提高用户体验度的再一次改进

因为在我们的现实过程中，我们一般是不动表格的头部，进行增添或者修改的是表格的正文部分

--头部用，thead(Table Head表头)

--表格正文用，tbody(Table Body表格主体)

在这里，并不能体现什么效果，因为这个复杂性并不高

----最终代码如下：