HTML(七) 表格

来源：互联网发布：网络最火说唱歌手排名编辑：程序博客网时间：2024/05/19 03:17

表格的基本结构

<!DOCTYPE html><html><head><meta charset="UTF-8"><title>表格的基本结构</title></head><body><table border="1">    <tr>        <th>1</th>        <th>2</th>        <th>3</th>        <th>4</th>    </tr>    <tr>        <td>1-1</td>        <td>1-2</td>        <td>1-3</td>        <td>1-4</td>    </tr>    <tr>        <td>2-1</td>        <td>2-2</td>        <td>2-3</td>        <td>1-4</td>    </tr>    <tr>        <td>3-1</td>        <td>3-2</td>        <td>3-3</td>        <td>3-4</td>    </tr></table></body></html>

表格基本结构

合并单元格

colspan 和 rowspan

<!DOCTYPE html><html><head><meta charset="UTF-8"><title>用colspan 左右合并单元格  rowspan属性上下合并单元格</title></head><body><table border="1">    <tr>        <th>1</th>        <th>2</th>        <th>3</th>        <th>4</th>    </tr>    <tr>        <td colspan="2">1-1-2</td>        <td>1-3</td>        <td>1-4</td>    </tr>    <tr>        <td>2-1</td>        <td rowspan="2">3-2-2</td>        <td>2-3</td>        <td>1-4</td>    </tr>    <tr>        <td>3-1</td>        <td>3-3</td>        <td>3-4</td>    </tr></table></body></html>

合并行列

用align 属性设置对齐方式

设置该行居中显示

<tr align="center">        <td colspan="2">1-1-2</td>        <td>1-3</td>        <td>1-4</td>    </tr>

bgcolor 属性设置表格背景色和边框色

表格背景色为红色

<table border="1" width="400" bgcolor="red">

该边框为绿色

<td rowspan="2" align="center" bgcolor="green">3-2-2</td>

用cellpadding 属性和cellspacing 属性设定边距

cellpadding 属性设定表格单元格中的内容距离格线的距离，即表格中单元格和内容之间的距离
cellspacing 属性设定表格相邻单元格边线之间的距离，即表格中单元格和单元格之间的距离

<table border="1" width="400" bgcolor="red" cellpadding="20px;" cellspacing="20px;">

阅读全文

0 0