HTML学习之表格,列表,区块,布局

最新推荐文章于 2022-08-20 16:16:17 发布

Logbook怪

最新推荐文章于 2022-08-20 16:16:17 发布

阅读量920

点赞数

本文链接：https://blog.csdn.net/aaaaaab_/article/details/88714857

版权

HTML表格

表格由 <table> 标签来定义。每个表格均有若干行（由 <tr> 标签定义），每行被分割为若干单元格（由 <td> 标签定义）。字母 
td 指表格数据（table data），即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。
格的表头使用 <th> 标签进行定义,大多数浏览器会把表头显示为粗体居中的文本.

HTML 表格标签

标签	描述
<table>	定义表格
<th>	定义表格的表头
<tr>	定义表格的行
<td>	定义表格单元
<caption>	定义表格标题
<colgroup>	定义表格列的组
<col>	定义用于表格列的属性
<thead>	定义表格的页眉
<tbody>	定义表格的主体
<tfoot>	定义表格的页脚
colspan表示合并列数,rowspan则表示合并行数
cellspacing表示单元格间距,cellpadding表示单元格边距

页眉主体页脚的范例,对一个复杂的界面做一个排版,以至于浏览器解析的时候不会出现问题

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>表格范例</title> 
</head>
<body>
<table>
	<thead>
		<tr>
			<th> Title </th>
			<th> Price </th>
			<th> Avaliable </th>
		<tr>
	</thead>
	<tbody>
		<tr>
			<td> CSS </td>
			<td> $29 </td>
			<td> 16 </td>
		</tr>
		<tr>
			<td> Java </td>
			<td> $35 </td>
			<td> 10 </td>
		</tr>
	</tbody>
	<tfoot>
		<tr>
			<td> Total </td>
			<td> $64 </td>
			<td> 26 </td>
		</tr>
	</tfoot>
</table>
</body>
</html>

在这里插入图片描述

多属性结合表格范例

css样式代码,声明一些表格样式:放body代码之前

<style>
.tabtop13 {
	margin-top: 13px;
}
.tabtop13 td{
	background-color:#ffffff;
	height:25px;
	line-height:150%;
}
.font-center{ text-align:center}
.btbg{background:#e9faff !important;}
.btbg1{background:#f2fbfe !important;}
.btbg2{background:#f3f3f3 !important;}
.biaoti{
	font-family: 微软雅黑;
	font-size: 26px;
	font-weight: bold;
	border-bottom:1px dashed #CCCCCC;
	color: #255e95;
}
.titfont {
	
	font-family: 微软雅黑;
	font-size: 16px;
	font-weight: bold;
	color: #255e95;
	background: url(../images/ico3.gif) no-repeat 15px center;
	background-color:#e9faff;
}
.tabtxt2 {
	font-family: 微软雅黑;
	font-size: 14px;
	font-weight: bold;
	text-align: right;
	padding-right: 10px;
	color:#327cd1;
}
.tabtxt3 {
	font-family: 微软雅黑;
	font-size: 14px;
	padding-left: 15px;
	color: #000;
	margin-top: 10px;
	margin-bottom: 10px;
	line-height: 20px;
}	
</style>

body代码:表格的核心逻辑

<body>
<table width="100%" border="0" cellspacing="0" cellpadding="0" align="center">
  <tr>
    <td align="center" class="biaoti" height="60">受理员业务统计表</td>
  </tr>
  <tr>
    <td align="right" height="25">2017-01-02---2017-05-02</td>
  </tr>
</table>

<table width="100%" border="0" cellspacing="1" cellpadding="4" bgcolor="#cccccc" class="tabtop13" align="center">
  <tr>
    <td colspan="2" c

最低0.47元/天解锁文章

Logbook怪

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML学习之表格,列表,区块,布局

HTML表格表格由 <table> 标签来定义。每个表格均有若干行（由 <tr> 标签定义），每行被分割为若干单元格（由 <td> 标签定义）。字母 td 指表格数据（table data），即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。格的表头使用 <th> 标签进行定义,大多数浏览器会把表头显示为粗体...
复制链接

扫一扫