![7b6078387301ce6b93a9348c059c1415.png](https://i-blog.csdnimg.cn/blog_migrate/af5b3970ba497e94f5604d07cf2b06e8.jpeg)
Ⅰ 原始表格
- 只有表格样式,无实际表格意义
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表格练习哈利给给</title>
</head>
<body>
<table>
<tr>
<td>姓名</td>
<td>攻击</td>
<td>生命</td>
</tr>
<tr>
<td>潘哈德 EBR 105</td>
<td>390</td>
<td>1500</td>
</tr>
<tr>
<td>曼蒂科尔</td>
<td>390</td>
<td>1490</td>
</tr>
</table>
</body>
</html>
![1f801f5a9ead2011c659c523d7c74a60.png](https://i-blog.csdnimg.cn/blog_migrate/0977cd87e77d9f741bcb5e8f9c75890d.jpeg)
Ⅱ 为表格添加框线
- <table border="1px"> !-- 增加框线,指定宽度1px
<table border="1px">
...
</table>
![3a1d531ab0dc25d45d29d4786465e3e0.png](https://i-blog.csdnimg.cn/blog_migrate/159a9d8cdf772ce2c2547d40d5f86521.jpeg)
Ⅲ 修改表格宽度
- <table width="300px"> !-- 指定表格宽度300px
<table border="1px" width="200px">
![3f4084037c83f7fefc34ffeaeb6c765d.png](https://i-blog.csdnimg.cn/blog_migrate/19778663d7d56315c2138f26908bb409.jpeg)
Ⅳ 修改表格高度
- <table height="200px"> !-- 指定表格高度
<table border="1px" width="200px" height="200px">
![2e43a02ddb58376b3ee41e194141bb6c.png](https://i-blog.csdnimg.cn/blog_migrate/0a7d3073c6c53d4949dba639ffac2b19.jpeg)
Ⅴ 表格位置居中显示
- align='center' -- 表格相对网页居中
<table border="1px" width="200px" height="200px" align="center">
![12cdbe8042794110d37f217789dab7a1.png](https://i-blog.csdnimg.cn/blog_migrate/5b3bb05e8a82230656ac8c5f082d89f9.jpeg)
Ⅵ 单元格水平方向居右显示
- align='right' -- 表格,单元格相对居右显示
![0b274338177a07b940fdcf3a9e74aaa7.png](https://i-blog.csdnimg.cn/blog_migrate/7646c29ffde6a135b8704a7a59c4a19c.jpeg)
Ⅶ 垂直方向居上,及居下显示
- valign="bottom" -- 垂直居下
- valign="top" -- 垂直居上
![5ccbe4439f770b065dba64c35b749622.png](https://i-blog.csdnimg.cn/blog_migrate/363af910512a97b85e140d8bbb8b663a.jpeg)
Ⅷ 表格线条美化
- <table cellspacing="50px"> -- 单元格线条宽度设置
![cab51f6d91b6a08a3b1c8e74a1a752e0.png](https://i-blog.csdnimg.cn/blog_migrate/30296184927560ee6578ce3416fcac5b.jpeg)
- <table cellpadding="20px" > -- 单元格框线和单元格内容的距离
![1c4298a803712bfe88b25df1cbd849ab.png](https://i-blog.csdnimg.cn/blog_migrate/31bc3d25fa8824284be1095b7cd06737.jpeg)
- 单线条表格框线
- 方式一
- <table border="1px" cellspacing="0px" > !-- 两根线合到一起
![df83c7679c40c285ab777d66ab271b4b.png](https://i-blog.csdnimg.cn/blog_migrate/b7e3d4ff261f36bdee22ffada96b0581.jpeg)
-
- 方式二
- <table bgcolor="red" border="0px" cellspacing="1px">
cellspacing="1px" -- 默认颜色为白色
bgcolor="red" -- 设置颜色为红色
![e7b226751677700c2adc722652bf3630.png](https://i-blog.csdnimg.cn/blog_migrate/e9c3ca6fbf472a0b5fb0c20dbd1b8a24.jpeg)
-
- 方式三 -- 常用
<table style="border-collapse: collapse;border: 1px solid green" border="1px">
border-collapse: collapse; -- 让边框合并到一起
border: 1px -- 边框样式宽度 1像素
solid -- 边框样式实线样式
green -- 线条颜色
![71ad7d653c29de1c94d49ce06b6003ab.png](https://i-blog.csdnimg.cn/blog_migrate/2526e3ed9f638a7e262f418f75dceb3d.jpeg)
Ⅸ 单元格合并
- 垂直方向单元格合并
![1a65b500aa09a12ea87682ce79507874.png](https://i-blog.csdnimg.cn/blog_migrate/8afa53b1d607cd253e42d9f34af2c982.jpeg)
- 下面错误的示范 -- 单元格变形
![e18da90806262743bf58e4d6d2dc6a67.png](https://i-blog.csdnimg.cn/blog_migrate/2139f874a665d85cbdc76754b9776783.jpeg)
- 水平方向单元格合并
![243a88feb5d11eafafd3eea6dee984d8.png](https://i-blog.csdnimg.cn/blog_migrate/562e3f8388f47fe16dcb15526e06bf5c.jpeg)