HTML 表格及练习

HTML 表格及练习
表格

 概述
- 表格是一种二维结构，横行纵列。
- 由单元格组成。
- 表格是一种非常“强” 的结构：
- 每一行有相同的列数（单元格），每一列有相同的行数（单元格）
- 同一列的单元格，宽度（以最大的为准）相同，同列等宽；同行等高
- 基本结构
```
<table>
    <tr>
        <td>td>
    tr>
table>
1
2
3
4
5
```
定义表格标签属性属性举例效果 border border=“0” border=“1” 无边框有边框 cellspacing cellspacing=“20” 设置边框与边框的距离 cellpadding cellpadding=“10” 设置边框与内容之间的距离

属性	举例	效果
border	border=“0” border=“1”	无边框有边框
cellspacing	cellspacing=“20”	设置边框与边框的距离
cellpadding	cellpadding=“10”	设置边框与内容之间的距离

 table 通用属性
,, 定义行
 
 
 标签属性
都识别的属性 
  属性 值 举例 效果
align left/center/right align=“center” 居中
width 百分比/数字 width="80%"或 width=“800” 设置宽度
height 百分比/数字 height="20%"或 height=“100” 设置高度 
 
 
  
属性 值 举例 效果
valign top/middle/bottom valign=“top” 在行顶

属性	值	举例	效果
valign	top/middle/bottom	valign=“top”	在行顶

 
 
 定义单元格
 
 合并单元格
 
 colspan 用于跨列合并 (横向)
 <td colspan = "2">td>
1
 删除第四列，第三列的 colspan 的值设置为2
 rowspan 用于跨行合并 (纵向)
 <td rowspan = "3">td>
1
  
练习 
基本表格 
<html>
    <head>
        <meta charset="utf-8">
    head>
    <body>
        <table border="1">
			<tr>
				<td>(1,1)td>
				<td>(1,2)td>
				<td>(1,3)td>
			tr>
			<tr>
				<td>(2,1)td>
				<td>(2,2)td>
				<td>(2,3)td>
			tr>
			<tr>
				<td>(3,1)td>
				<td>(3,2)td>
				<td>(3,3)td>
			tr>
		table>
    body>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24 
 
跨行表格 
<html>
    <head>
        <meta charset="utf-8">
    head>
    <body>
        <table border="1" width="300">
			<tr align="center">
				<td rowspan="2">语文td>
				<td>韩梅梅td>
				<td>98td>
			tr>
			<tr align="center">
				<td>李磊td>
				<td>88td>
			tr>
			<tr align="center">
				<td rowspan="2">数学td>
				<td>韩梅梅td>
				<td>95td>
			tr>
			<tr align="center">
				<td>李磊td>
				<td>12td>
			tr>
		table>
    body>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27 
 
跨列表格 
<html>
    <head>
        <meta charset="utf-8">
    head>
    <body>
        <table border="1" width="300">
			<tr>
				<td colspan="3"  align="center">学生成绩td>
			tr>
			<tr>
				<td>语文td>
				<td>98td>
			tr>
			<tr>
				<td>数学td>
				<td>99td>
			tr>
		table>
    body>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20 
 
跨行跨列表格 
<html>
    <head>
        <meta charset="utf-8">
    head>
    <body>
        <table border="1" width="300">
			<tr>
				<td colspan="3" align="center">学生成绩td>
			tr>
			<tr align="center">
				<td rowspan="2">语文td>
				<td>韩梅梅td>
				<td>98td>
			tr>
			<tr align="center">
				<td>李磊td>
				<td>88td>
			tr>
			<tr align="center">
				<td rowspan="2">数学td>
				<td>韩梅梅td>
				<td>95td>
			tr>
			<tr align="center">
				<td>李磊td>
				<td>12td>
			tr>
		table>
    body>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

表格

概述

定义表格 标签属性 属性举例效果borderborder=“0”border=“1”无边框有边框cellspacingcellspacing=“20”设置边框与边框的距离cellpaddingcellpadding=“10”设置边框与内容之间的距离

练习

基本表格

跨行表格

跨列表格

跨行跨列表格

`定义表格标签属性属性举例效果 border border=“0” border=“1” 无边框有边框 cellspacing cellspacing=“20” 设置边框与边框的距离 cellpadding cellpadding=“10” 设置边框与内容之间的距离`