HTML——表格
目录
一、表格的基本构成
二、表格的属性——宽、高
三、表格的属性——cellpadding和cellspacing
四、表格的标题
五、
一、表格的基本构成
使用 这里的 属性 属性 用 表格有自带的属性标签用来创建表格,
标签用来创建行, 标签用来创建列
border属性表示给表格添加边框,它的值2表示边框的宽度为2px代码如下:
1 <table border="2">
2 <tr>
3 <td>姓名td>
4 <td>年龄td>
5 tr>
6 <tr>
7 <td>张三td>
8 <td>18td>
9 tr>
10 table>
效果如下:
二、表格的属性——宽、高
width和height来定义表格的宽和高,使表格更大方、美观。width和hegiht单位是px,可加可不加。width和height的值还可以是百分比(%),这样表格就可以随着文档宽高的变化而变化。代码如下:
1 <table border="1" width="100%" height="200">
2 <tr>
3 <td>姓名td>
4 <td>语文td>
5 <td>数学td>
6 <td>英语td>
7 <td>合计td>
8 tr>
9 <tr>
10 <td>李四td>
11 <td>90td>
12 <td>95td>
13 <td>80td>
14 <td>265td>
15 tr>
16 table>
效果如下:
三、表格的属性——cellpadding和cellspacing
cellpadding,它规定了单元格边沿与其内容之间的空白。cellspacing,它规定了单元格之间的空间。代码如下:
<table border="1" cellpadding="20" cellspacing="0" >
<tr>
<td>姓名td>
<td>语文td>
<td>数学td>
<td>英语td>
<td>合计td>
tr>
<tr>
<td>李四td>
<td>90td>
<td>95td>
<td>80td>
<td>265td>
tr>
table>
代码如下:
<table border="1" cellpadding="20" cellspacing="20" >
<tr>
<td>姓名td>
<td>语文td>
<td>数学td>
<td>英语td>
<td>合计td>
tr>
<tr>
<td>李四td>
<td>90td>
<td>95td>
<td>80td>
<td>265td>
tr>
table>
四、表格的标题
标签来创建表格标题,需要注意的是它的位置:紧随标签之后
1 <table border="1" cellpadding="10" cellspacing="0">
2 <caption>科目成绩caption>
3 <tr>
4 <td>姓名td>
5 <td>语文td>
6 <td>数学td>
7 <td>英语td>
8 <td>合计td>
9 tr>
10 <tr>
11 <td>李四td>
12 <td>90td>
13 <td>95td>
14 <td>80td>
15 <td>265td>
16 tr>
17 table>
五、
标签的rowspan属性和colspan属性
标签的 rowspan属性来实现,它规定了单元格可横跨的行数。(行的合并)
标签的 colspan属性来实现,它规定了单元格可横跨的列数。(列的合并)
rowspan属性代码如下 1 <table border="2" cellspacing="0" width="200" >
2 <tr>
3 <td rowspan="3">科目td>
4 <td>语文 td>
5 <td>80td>
6 tr>
7 <tr>
8 <td>数学td>
9 <td>70td>
10 tr>
11 <tr>
12 <td>英语td>
13 <td>75td>
14 tr>
15 table>
colspan属性代码如下: 1 <table border="2" cellspacing="0" width="200">
2 <tr>
3 <td colspan="3">科目 td>
4 tr>
5 <tr>
6 <td>语文td>
7 <td>数学td>
8 <td>英语td>
9 tr>
10 <tr>
11 <td>70td>
12 <td>80td>
13 <td>75td>
14 tr>
15 table>
添加内容:
align,也是控制文本方向的。text-align属性有下面的几个值:
left:左对齐;center:居中对齐;right:右对齐;justify:两端对齐。1 <style>
2 table{
3 text-align: center;
4 }
5 style>