今天我们分享关于HTML中表格的内容，表格在前端开发中使用得很多，它可以清晰的排列数据。在之前的web 1.0时代，表格多用在网页布局定位上，但是到web 2.0时代，表格定位排版已经摒弃了，现在多使用 div + css 的方式。
表格的基本结构，含有的标签符有：
<table>标签，表格
<tr>标签，行
<td>标签，单元格
tr，td均要包含在<table></table>标签之内。
语法：
<table><tr><td>单元格，1行1列</td><td>单元格，1行2列</td></tr><tr><td>单元格，2行1列</td><td>单元格，2行2列</td></tr></table>
浏览器预览效果，表格没有看见边框线，但是数据是按照表格的方式排列的，tr英文意思 table row ，td英文意思 table data cell。
<table>表示表格开始，</table>表示表格结束，其内每一行需要一个成对的<tr></tr>包裹，在行内需要有多组<td></td>表示单元格，有多少个成对的<tr>，就说明此表格有多少行，每行有多少个成对的<td>，就说明有多少列，在制作表格时，每行的单元格要统一，这样显示的表格才是完整的。
<html><head><title>表格基本结构</title></head><body><table><tr><td>单元格1</td><td>单元格2</td></tr><tr><td>单元格3</td><td>单元格4</td></tr></table></body></html>
默认情况，表格是没有边框的，需要加边框我们需要添加属性来控制，但是一般不用HTML的表格属性，实际开发中，都是用CSS层叠样式表来控制表格表框、背景色等，后期我们分享关于CSS的内容。
这里插一句，有的初学者会有疑问，网页布局结构时是用table好，还是用div + css好呢？
在web 1.0时代，网页布局都是使用table布局的，但是它的弊端多，会造成代码冗余、难以维护、不够灵活等问题。而到了web 2.0时代，布局通常都是使用div + css方式，布局灵活，代码清晰可维护。
表格完整结构，含有的标签有：
<table>标签，表格
<caption>标签，表格标题
<thead>标签，表头
<th>标签，行标题
<tbody>标签，表体
<tr>标签，行
<td>标签，单元格
<tfoot>标签，表尾
下面我们逐步的解释他们的用法，先说caption标签，表格一般都有一个标题，默认情况位于表格第一行，一个表格只能含有一个标题。
<table><caption>表格标题</caption><tr><td>单元格</td><td>单元格</td></tr><tr><td>单元格</td><td>单元格</td></tr></table>
举个实际的示例，代码如下：
<html><head><title>表格标题标签</title></head><body><table border="1"><caption>学习成绩表</caption><tr><td>姓名</td><td>HTML</td><td>CSS</td><td>Javascript</td></tr><tr><td>虾米</td><td>99</td><td>99</td><td>99</td></tr><tr><td>大王</td><td>60</td><td>60</td><td>60</td></tr></table></body></html>
默认情况下，表格是没有边框的，如果需要显示边框，就可以添加border属性，等于号后的数字表示边框的宽度，默认宽度是像素px单位的。
一般我们的表格都需要在第一行加粗显示，这里就引入了<th>标签符，它是<td>单元格的一种变体，实质还是一个单元格，只是浏览器会对它标记的内容，进行加粗和居中显示。th英文意思是 table header ，我们虽然可以使用<td>标签符代替<th>标签，但是从代码规范上不建议这样做。
也是举个实例：
<html><head><title>行标题标签</title></head><body><table border="1"><caption>考试成绩表</caption><tr><th>姓名</th><th>语文</th><th>数学</th><th>英语</th></tr><tr><td>9527</td><td>60</td><td>62</td><td>61</td></tr><tr><td>周先生</td><td>99</td><td>99</td><td>99</td></tr></table></body></html>
下一节，我们接着分享表格的剩余部分。
