实例
<!DOCTYPE html> <html lang="zh_CN"> <head> <meta charset="UTF-8"> <title>实例演示表格的用法以及行列合并的应用</title> </head> <body> <!--table>caption+thead+tbody>tr>th*6^(tr>td*6)*6--> <table border="1" cellspacing="0" cellpadding="5" width="510"> <caption>实例演示表格的用法以及行列合并的应用</caption> <thead> <tr bgcolor="#ff6347"> <th width="200">姓名</th> <th width="50">语文</th> <th width="50">数学</th> <th width="50">英语</th> <th width="50">科学</th> <th width="50">品社</th> </tr> <tr align="center"> <td>张三的成绩是多少呢？</td> <td>99</td> <td>98</td> <td>97</td> <td>96</td> <td>95</td> </tr> <tr align="center"> <td rowspan="2" colspan="2">李四和王五2行2列合并</td> <td>93</td> <td>92</td> <td>91</td> <td>90</td> </tr> <tr align="center"> <td>88</td> <td>87</td> <td>86</td> <td>85</td> </tr> <tr align="center"> <td>张飞</td> <td>84</td> <td>83</td> <td>82</td> <td>81</td> <td>80</td> </tr> <tr align="center"> <td>关羽</td> <td>79</td> <td>78</td> <td>77</td> <td>76</td> <td>75</td> </tr> <tr align="center"> <td colspan="4">副科的总分</td> <td>430</td> <td>425</td> </tr> </thead> </table> </body> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例
用table>caption+thead+tbody>tr>th*6^(tr>td*6)*6写起来真是高效。
caption的位置在table里面，不要错觉在外面。在网页里面显示在表格的外面，容易记错位置。
列合并用colspan,行合并用rowspan,把多余的td去掉即可。
table常用的属性：border,width,cellspacing,cellpadding
tr常用属性：bgcolor,align
td属性：width
tr 里面只能放th,td
td里面能放div,p, span，table等等标签
表头th单元格里面的内容自带加粗，居中样式。
cellspacing:表示单元格和单元格之间的缝隙，一般设置值为0.不写这个属性默认值为2
cellpadding表示单元格内容和单元格边框之间的距离
cellspacing，cellpadding这2个都是html5废弃的属性