在HTML中，表格的标准形式如下：
<table> </table>
使用上面的语言，就已经生成了一个表格，只不过这个表格什么都没有
那么，该如何让表格存在东西呢？
首先，我们需要使用到<tr> </tr> ，如下
<table> <tr> </tr> </table>这里的<tr> </tr> 就在表格中运用一行
但是在表格中，一行我们也可以有很多列
这时候我们就需要用到<td></td> 或者<th> </th>
如下->:
<table> <tr> <td> </td> </tr> <tr> <th> </th> </tr> </table>每一对 td或者th 代表了一列
使用效果如下：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>title</title> </head> <body> <table width="400px" height="500px" bgcolor="pink"> 这里是设置表格宽度为400，高度为500，单位是px <tr> <th>文具</th> <th>橡皮</th> </tr> <tr> <td>文具</td> <td>橡皮</td> </tr> </table> </body> </html>
在上图中，我们需要了解到
(注：上图大小不对，但你们自己可以重新试试，代码是对的)
<td>表示一般单元格 默认居左，并以普通格式显示
<th>表示标题单元格 默认居中，并以加粗格式显示
但是这样还不够直观，所以我们需要运用到边框线，边框线需要在table位置更改
使用如下：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>title</title> </head> <body> <table border="3px" bordercolor="red" width="400px" height="500px" bgcolor="pink"> <tr> <th>文具</th> <th>橡皮</th> </tr> <tr> <td>文具</td> <td>橡皮</td> </tr> </table> </body> </html>这里的border就是边缘线 bordercolor可以改变边缘线的颜色
使用效果如图：
我们也可以让每一行表格都更改一下位置和表格大小
如下：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>title</title> </head> <body> <table border="3px" bordercolor="red" width="400px" height="500px" bgcolor="pink" align="center" > <tr height="50px"> <th>文具</th> <th>橡皮</th> </tr> <tr align="center"> <td>文具</td> <td>橡皮</td> </tr> </table> </body> </html>
我们也可以更改表格内容的颜色，只需要在想更改的位置加上bgcolor即可
在表格中还有最后两种东西，一种为跨行--rowspan
另一种为跨列--colspan
说是跨，其实就是把一格的东西扩大成为N格
最后，我们写两个语言来整体实现
例子1：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>title</title> </head> <body> <table width="300px" height="500px" align="center" bgcolor="pink" border="3px" bordercolor="green" > <tr height="100px"> <th>文具</th> <th>个数</th> <th>价格</th> </tr> <tr align="center"> <td bgcolor="green">铅笔</td> <td>5</td> <td>88</td> </tr> <tr align="center"> <td>橡皮</td> <td >6</td> <td>99</td> </tr> <tr> <th>总价格</th> <td colspan="2" align="center">11</td> </tr> </table> </body> </html>效果图：
例题2：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>title</title> </head> <body> <table width="300px" height="500px" align="center" bgcolor="pink" border="3px" bordercolor="green" > <tr height="100px"> <th>文具</th> <th>个数</th> <th>价格</th> <th>总价格</th> </tr> <tr align="center"> <td bgcolor="green">铅笔</td> <td>5</td> <td>88</td> <td rowspan="2">11</td> </tr> <tr align="center"> <td>橡皮</td> <td >6</td> <td>99</td> </tr> </table> </body> </html>效果图：
