复制代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--
table:表格标签，里面包含 行 tr 和单元格 td(相当于列)
tr:行 有几行就写几个tr
td:单元表格 cell 有几列就写几个td
尽量每一行的列数保持一致，数据显示会比较好看
整个表格的单元格大小会根据内容的长度自动调整
表格的文字居中需要把align = "center"写在tr里，可以让整行文字居中
border:边框宽度
bordercolor:边框颜色 默认黑色
width:表格宽度
height:表格高度
bgcolor:背景颜色
cellspacing:单元格的间距 默认是有间隔的，可以设置为0
cellpadding:单元格的内间距 单元格内容跟边框之间的距离，有时候为了表格显示好看，会设置些值让内容与左边的边框有些间距。
align = "center" :表格在页面水平居中
<tr align = "center" > 这行的文字居中
<td align = "left" >年龄</td> 单元格中文字巨左 当单元格内容很长时 中文会自动换行 英文不会自动换行
img和现在的table宽高不用加单位px style宽高需要加单位px
图片和表格可以写宽高，其他的不一定可以，表单的iput标签就不行
不能写宽高的地方可以在style里面写
-->
<table border="1" bordercolor = "red" width = "300"
height = "100" bgcolor = "orange"
cellspacing = "10" cellpadding = "0" align = "center" >
<tr align="right" height = "30">
<td >姓名</td>
<td align="left">年龄</td>
<td>微信</td>
</tr>
<tr>
<td width="60">周杰伦</td>
<td>45</td>
<td>Jay</td>
</tr>
</table>
<hr>
<!-- 单元格合并
rowspan:行合并 ： 值写合并自己和下方单元格的个数
colspan:列合并 ： 值写合并自己和其他单元格的个数
-->
<table border="1" width="300" height = "200" cellspacing="0">
<tr align="center">
<td width = "100">姓名</td>
<td width = "100">年龄</td>
<td width = "100">性别</td>
</tr>
<tr>
<td>坤坤</td>
<td>26</td>
<td rowspan="2">男</td>
</tr>
<tr>
<td>鹿晗</td>
<td>30</td>
<!-- <td>男</td> -->
</tr>
<tr>
<td>刘亦菲</td>
<td colspan="2">18 女</td>
<!-- <td>女</td> -->
</tr>
</table>
</body>
</html>
html
复制代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--
table:表格标签，里面包含 行 tr 和单元格 td(相当于列)
tr:行 有几行就写几个tr
td:单元表格 cell 有几列就写几个td
尽量每一行的列数保持一致，数据显示会比较好看
整个表格的单元格大小会根据内容的长度自动调整
表格的文字居中需要把align = "center"写在tr里，可以让整行文字居中
border:边框宽度
bordercolor:边框颜色 默认黑色
width:表格宽度
height:表格高度
bgcolor:背景颜色
cellspacing:单元格的间距 默认是有间隔的，可以设置为0
cellpadding:单元格的内间距 单元格内容跟边框之间的距离，有时候为了表格显示好看，会设置些值让内容与左边的边框有些间距。
align = "center" :表格在页面水平居中
<tr align = "center" > 这行的文字居中
<td align = "left" >年龄</td> 单元格中文字巨左 当单元格内容很长时 中文会自动换行 英文不会自动换行
img和现在的table宽高不用加单位px style宽高需要加单位px
图片和表格可以写宽高，其他的不一定可以，表单的iput标签就不行
不能写宽高的地方可以在style里面写
-->
<table border="1" bordercolor = "red" width = "300"
height = "100" bgcolor = "orange"
cellspacing = "10" cellpadding = "0" align = "center" >
<tr align="right" height = "30">
<td >姓名</td>
<td align="left">年龄</td>
<td>微信</td>
</tr>
<tr>
<td width="60">周杰伦</td>
<td>45</td>
<td>Jay</td>
</tr>
</table>
<hr>
<!-- 单元格合并
rowspan:行合并 ： 值写合并自己和下方单元格的个数
colspan:列合并 ： 值写合并自己和其他单元格的个数
-->
<table border="1" width="300" height = "200" cellspacing="0">
<tr align="center">
<td width = "100">姓名</td>
<td width = "100">年龄</td>
<td width = "100">性别</td>
</tr>
<tr>
<td>坤坤</td>
<td>26</td>
<td rowspan="2">男</td>
</tr>
<tr>
<td>鹿晗</td>
<td>30</td>
<!-- <td>男</td> -->
</tr>
<tr>
<td>刘亦菲</td>
<td colspan="2">18 女</td>
<!-- <td>女</td> -->
</tr>
</table>
</body>
</html>