1 表格
以前网站都是table布局,现在是div+css布局,但是表格现在也很重要。在做网页的时候用的很多
注意一下表格是没列元素的
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>title>
<base target="_blank_"/>
head>
<body>
<table width="500" border="1">
<tr>
<td>姓名td>
<td>性别td>
<td>电话td>
tr>
<tr>
<td>小王td>
<td>女td>
<td>110td>
tr>
<tr>
<td>小名td>
<td>男td>
<td>110td>
tr>
table>
body>
html>
2、居中表格,center
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>title>
<base target="_blank_"/>
head>
<body>
<table width="500" border="1" align="center" cellspacing="10">
<tr>
<td>姓名td>
<td>性别td>
<td>电话td>
tr>
<tr>
<td>小王td>
<td>女td>
<td>110td>
tr>
<tr>
<td>小名td>
<td>男td>
<td>110td>
tr>
table>
body>
html>
3、单元格和单元格的距离
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>title>
<base target="_blank_"/>
head>
<body>
<table width="500" border="1" align="center" cellspacing="10">
<tr>
<td>姓名td>
<td>性别td>
<td>电话td>
tr>
<tr>
<td>小王td>
<td>女td>
<td>110td>
tr>
<tr>
<td>小名td>
<td>男td>
<td>110td>
tr>
table>
body>
html>
4、cellpadding,单元格内容距离单元格边框的距离
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>title>
<base target="_blank_"/>
head>
<body>
<table width="500" border="1" align="center" cellspacing="10" cellpadding="5">
<tr>
<td>姓名td>
<td>性别td>
<td>电话td>
tr>
<tr>
<td>小王td>
<td>女td>
<td>110td>
tr>
<tr>
<td>小名td>
<td>男td>
<td>110td>
tr>
table>
body>
html>
5、三参为0,border,cellpadding,cellpacing
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>title>
<base target="_blank_"/>
head>
<body>
<table width="300" border="0" align="center" cellspacing="0" cellpadding="0">
<tr>
<td>姓名td>
<td>性别td>
<td>电话td>
tr>
<tr>
<td>小王td>
<td>女td>
<td>110td>
tr>
<tr>
<td>小名td>
<td>男td>
<td>110td>
tr>
table>
body>
html>
6、居中
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>title>
<base target="_blank_"/>
<style>
tr {
text-align: center;
}
style>
head>
<body>
<table width="300" border="1" align="center" cellspacing="0" cellpadding="0">
<tr>
<td>姓名td>
<td>性别td>
<td>电话td>
tr>
<tr>
<td>小王td>
<td>女td>
<td>110td>
tr>
<tr>
<td>小名td>
<td>男td>
<td>110td>
tr>
table>
body>
html>
7、表头标签
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>title>
<base target="_blank_"/>
<style>
tr {
text-align: center;
}
style>
head>
<body>
<table width="300" border="1" align="center" cellspacing="0" cellpadding="0">
<tr>
<th>姓名th>
<th>性别th>
<th>电话th>
tr>
<tr>
<td>小王td>
<td>女td>
<td>110td>
tr>
<tr>
<td>小名td>
<td>男td>
<td>110td>
tr>
table>
body>
html>
8、表格标题
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>title>
<base target="_blank_"/>
<style>
tr {
text-align: center;
}
style>
head>
<body>
<table width="300" border="1" align="center" cellspacing="0" cellpadding="0">
<caption>个人信息表caption>
<tr>
<th>姓名th>
<th>性别th>
<th>电话th>
tr>
<tr>
<td>小王td>
<td>女td>
<td>110td>
tr>
<tr>
<td>小名td>
<td>男td>
<td>110td>
tr>
table>
body>
html>
9、表格结构
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>title>
<base target="_blank_"/>
<style>
tr {
text-align: center;
}
style>
head>
<body>
<table width="500" border="1" align="center" cellspacing="0" cellpadding="0">
<caption><h3>小说排行榜h3>caption>
<thead>
<tr>
<th>排行th>
<th>关键词th>
<th>今日搜索th>
<th>最近七日th>
<th>相关连接th>
tr>
thead>
<tbody>
<tr>
<td>1td>
<td>鬼吹灯td>
<td>110td>
<td>990td>
<td>
<a href="#">贴吧a>
<a href="#">图片a>
<a href="#">百科a>
td>
tr>
<tr>
<td>1td>
<td>鬼吹灯td>
<td>110td>
<td>990td>
<td>
<a href="#">贴吧a>
<a href="#">图片a>
<a href="#">百科a>
td>
tr>
<tr>
<td>1td>
<td>鬼吹灯td>
<td>110td>
<td>990td>
<td>
<a href="#">贴吧a>
<a href="#">图片a>
<a href="#">百科a>
td>
tr>
<tr>
<td>1td>
<td>鬼吹灯td>
<td>110td>
<td>990td>
<td>
<a href="#">贴吧a>
<a href="#">图片a>
<a href="#">百科a>
td>
tr>
<tr>
<td>1td>
<td>鬼吹灯td>
<td>110td>
<td>990td>
<td>
<a href="#">贴吧a>
<a href="#">图片a>
<a href="#">百科a>
td>
tr>
<tr>
<td>1td>
<td>鬼吹灯td>
<td>110td>
<td>990td>
<td>
<a href="#">贴吧a>
<a href="#">图片a>
<a href="#">百科a>
td>
tr>
tbody>
table>
body>
html>