开发者学堂课程【零基础学前端 HTML+CSS ：表格】学习笔记，与课程紧密联系，让用户快速学习知识。
课程地址：https://developer.aliyun.com/learning/course/398/detail/5115
表格
内容介绍：
一、table (表格)构成
二、table 标签
三、示例
四、table 标签的常用属性
一、table(表格) 构成
表格一般主要用于展示数据。但网页设计中，主要用于布局。
下面 HTML 中表格的构成∶
二、table 标签
HTML 中用表格由 <table> 标签来定义
每个表格均有若干行(由 <tr> 标签定义)
每行被分割为若干单元格(由 <td> 标签定义)
表头使用 <th> 标签进行定义)
<td> 元素中的内容为表格数据，可以包含文本、图片、列表、段落、水平线、表格等等任何元素。
三、示例：
在 table.html 中输入
<table>
<tr>
<td>单元格</td>
<td>单元格</td>
<td>单元格</td>
</tr>
</table>
运行结果如下是三
现在如果想要两行三列
<table>
<tr>
<td>单元格1</td>
<td>单元格2</td>
<td>单元格3</td>
</tr>
<tr>
<td>单元格4</td>
<td>单元格5</td>
<td>单元格6</td>
</tr>
</table>
运行结果如下
内容是作为元素存在的，要放在 <td> 里，不能将内容直接放在 <tr>里，是语法错误。
HTML 里边排版我们有表格进行布局，数据统计都有使用。
表格的元素 整体定位我们用 <table></table>，我们的行用 <tr></tr>，单元格用 <td></td>，我们的内容放到 <td> 内容 </td> 里边。同样我们表格可以支持嵌套。
比如输入代码：
<table>
<tr>
<td>中间嵌套1</td>
</tr>
<tr>
<td>中间嵌套2</td>
</tr>
<tr>
<td>中间嵌套3</td>
</tr>
</table>
运行结果如下
四、table 标签的常用属性
<table> 的 cellspacing 属性用来定义表格的间距。
<table> 的 cellpadding 属性用来定义表格的边距。
<table> 的 width 属性用来定义表格的宽度。
<table> 的 height 属性用来定义表格的高度。
<table> 的 border 属性用来定义表格的边框粗细。
<table> 的 align 属性用来定义表格在页面中的水平对齐方式。
比如输入代码：
<table width = “500px”>
<tr>
<td>内容1</td>
<td>内容2</td>
</tr>
</table>
(此外，像素与显示器分辨率有关。14寸笔记本分辨1366*768 ，12寸显示器1280*800，如果是19寸，1400*900px，大于19寸21、23、27是1920*1080分辨率。
一般网页分辨率1000px，不会更多)
运行结果如下
再加入一点颜色
<table width = “500px” bgcolor= “aqua”>
再来修改
<table width = “500px” bgcolor= “aqua” cellpadding= “10px”>
效果如下，内容与边框产生了一定距离
再来和边距产生一定距离,并把背景颜色加到 <td> 里
<table width = “500px” cellpadding= “50px” cellspacing = “10px”>
<tr>
<td bgcolor = “aqua”>内容1</td>
<td bgcolor = “aqua”>内容2</td>
</tr>
</table>
运行结果如下
此外若去掉 cellspacing = “10px”，显示效果是有默认值存在的
如果想要两个单元格合并，可以改为 cellspacing = “0px”
再来修改
<table bgcolor = “#dc143c” width = “500px” cellpadding= “10px” cellspacing = “10px”>
<tr>
<td bgcolor = “aqua”>内容1</td>
<td bgcolor = “aqua”>内容2</td>
</tr>
<tr>
<td bgcolor = “aqua”>内容3</td>
<td bgcolor = “aqua”>内容4</td>
</tr>
</table>
显示如下
添加表格边框
<table bgcolor = “#dc143c” width = “500px” cellpadding= “10px” cellspacing = “10px” border= “10px” >
不写边框时，默认存在一个透明边框
添加表格对齐，可以放置在 <td> 中，就是内容相对外圈对齐，如果写在 <table> 中就是表格整体相对外圈对齐
<td bgcolor = “aqua” align = “right”>内容1</td>
总结：
我们可以设置表格的宽高，也可以定义表格的间距和边距。
间距是单元格与单元格之间的距离
边距是内容与单元格之间的距离
