CSDN博客利用HTML标签制作美观表格

HTML代码：

<table>
       <thead>
              <tr>
                  <th align = "left" colspan = "5"><font size = 4 color = "Red">用于定义数据类型的关键字</font></th>
              </tr>
       </thead>
       <tbody>
               <tr>
                    <td>class</td>
                    <td>interface</td>
                    <td>enum</td>
                    <td>byte</td>
                    <td>short</td>    
                </tr>
                <tr>
                    <td>int</td>
                    <td>long</td>
                    <td><font size = 6 color = "FF00FF">float</font></td>
                    <td>double</td>
                    <td>char</td>    
                </tr>
                <tr>
                    <td>boolean</td>
                    <td>void</td>
                    <td bgcolor = "FF0000"></td>
                    <td></td>
                    <td></td>    
                </tr>        
        </tbody>
         <thead>
                <tr>
                    <th align = "center" colspan = "5"><font size = 6 color = "Blue">用于定义流程控制的关键字</font></th>
                </tr>
        </thead>
        <tbody>
                <tr>
                    <td>if</td>
                    <td>else</td>
                    <td>switch</td>
                    <td>case</td>
                    <td>default</td>    
                </tr>
                <tr>
                    <td>while</td>
                    <td>do</td>
                    <td>for</td>
                    <td>break</td>
                    <td>continue</td>    
                </tr>
                <tr>
                    <td>return</td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>    
                </tr>        
        </tbody>
        <thead>
                <tr>
                    <th align = "right" colspan = "5"><font size = 4 color = "Green">用于定义访问权限修饰符的关键字</font></th>
                </tr>
        </thead>
        <tbody>
                <tr>
                    <td>private</td>
                    <td>protected</td>
                    <td colspan = "2" bgcolor = "00FFFF">public</td>
                    <td></td>
                </tr>
        </tbody>
        <thead>
                <tr>
                    <th align = "left" colspan = "5"><font size = 4 color = "9F5F9F">用于定义类与类之间关系的关键字</font></th>
                </tr>
        </thead>
        <tbody>
                <tr>
                    <td colspan = "2">extends</td>
                    <td>implements</td>
                    <td></td>
                    <td></td>
                </tr>
                <tr>
                    <td bgcolor = "Pink" rowspan = "2">合并两行</td>
                    <td>2</td>
                    <td>3</td>
                    <td>4</td>
                    <td>5</td>
                <tr>
                    <td>2</td>
                    <td>3</td>
                    <td>4</td>
                    <td>5</td>
                </tr>
        </tbody>
</table>

 

显示效果：

用于定义数据类型的关键字
class	interface	enum	byte	short
int	long	float	double	char
boolean	void
用于定义流程控制的关键字
if	else	switch	case	default
while	do	for	break	continue
return
用于定义访问权限修饰符的关键字
private	protected	public
用于定义类与类之间关系的关键字
extends		implements
合并两行	2	3	4	5
	2	3	4	5

结合显示效果对比代码，就可以知道每种效果的写法。

对齐方式：

• left 左对齐内容。
• right 右对齐内容。
• center 居中对齐内容。

合并单元格:

• rowspan 合并行
• colspan 合并列

字体font:

• size 大小
• color 字体颜色
• bgcolor 单元格背景色

通过十六进制（Hex）的颜色值排序: