html之table标签
2024-09-01 06:07:53
简单的html表格,由table元素以及一个或多个tr,th,td元素组成。
tr:定义表格行
th:定义表格头
td:定义表格单元
更复杂的 HTML 表格也可能包括 caption、col、colgroup、thead、tfoot 以及 tbody 元素。
可选属性:
align:
- left 字体靠左,右,居中
- center 字体靠右
- right 字体靠居中
bqcolor:表格背景色
- rgb(x,x,x)
- #xxxxxx
- colorname
border:表格边框的宽度
cellpadding:单元格边缘与其内容之间的距离
- pixels
- %
cellspacing:单元格之间的空白
- pixels
- %
示例代码:
<body>
<table border="" cellpadding="" cellspacing="">
<thead>
<tr>
<th>第一列</th>
<th align="left">第二列</th>
<th bgcolor="aqua">第三列</th>
</tr>
</thead>
<tbody>
<tr>
<td>row1 col1</td>
<td>row1 col2</td>
<td>row1 col3</td>
</tr>
<tr>
<td>row2 col1</td>
<td>row2 col2</td>
<td>row2 col3</td>
</tr>
<tr>
<td>row3 col1</td>
<td>row3 col2</td>
<td>row3 col3</td>
</tr>
</tbody>
</table>
</body>
上图看看:
效果怎么样呢?
再看看边框属性吧:
fram:外侧边框哪个可见
- void 外边框四边不见了
- above 仅上边框可见
- below 仅下边框可见
- hsides 仅上下边框可见
- lhs 仅左边框可见
- rhs 仅右边框可见
- vsides 仅左右边框可见
- box 四边均可见
- border 单元格边框可见
rules:内侧边框哪个可见
- none 无内侧边框
- groups 仅上边框可见
- rows 仅行间边框可见
- cols 仅列间边框可见
- all 内边框均可见
表格的概要与宽度
summary:表格的概要
width:表格的宽度
- %
- pixels
再看看其它表格效果吧:
上代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<table border="" cellpadding="" width="800px" bgcolor="#5f9ea0">
<tr>
<th>机型</th>
<th>CPU</th>
<th>内存</th>
<th colspan="">描述信息</th>
</tr>
<tr>
<th rowspan="">DELL2950</th>
<td>.4GHZ</td>
<td>16GB</td>
<td>
<p>CPU坏了一颗</p>
<p>工程师明上午来修</p>
</td>
<td>
<table border="">
<tr>
<th>姓名</th>
<th>电话</th>
</tr>
<tr>
<td>孔扎根</td>
<td></td>
</tr>
</table>
</td>
</tr>
<tr>
<td>.4GHZ*</td>
<td>16GB</td>
<td>
<ul>
<p>花费详单</p>
<li>服务器5800块</li>
<li>两颗CUP共1万块</li>
<li>内存花了4000块</li>
</ul>
</td>
<td>200GB</td>
</tr>
<tr>
<th>DELL5800</th>
<td>.4GHZ*</td>
<td>32GB</td>
<td>800GB</td>
<td>800GB</td>
</tr>
<tr>
<th>DELL9700</th>
<td>.4GHZ*</td>
<td>128GB</td>
<td>2TB</td>
<td>2TB</td>
</tr>
</table>
</body>
</html>
解释图:
最终效果图:
最新文章
- 关于.NET(c#)引用Dll后,找不到命名空间的问题
- DVRF:路由器漏洞练习靶机 Damn Vulnerable Router Firmware
- ENVI如何打开IRS P6的AWIFS的ges及LISS3的ges文件?
- hdu1166 树状数组
- 【线段树求逆序数】【HDU1394】Minimum Inversion Number
- Android抓包方法
- 特征提取方法: one-hot 和 IF-IDF
- jQuery smartMenu右键自定义上下文菜单插件
- 基于DP的LCS(最长公共子序列)问题
- flask 图文混排的简单操作
- Vue通过路由 query传递参数
- day10 while else continue break
- innodb_flush_log_at_trx_commit与sync_binlog理解
- bash编程-sed
- 关于java的一些小知识(课程作业01)
- java实战
- web前端面试题(一)
- 迷你MVVM框架 avalonjs 学习教程22、avalon性能大揭密
- const变量指针赋值给非const类型的指针运行结果
- linux通配符,grep和 egrep区别
热门文章
- susy-Toolkit 之翻译
- Android屏幕适配常识
- Android沉浸式(侵入式)标题栏(状态栏)Status(一)
- C# <;%@ Register %>;指令
- yii 隐藏index.php
- postgresql全文检索语法
- CentOS x64安装Virtualbox
- UITextView 点return 隐藏键盘
- Codeforces Round #366 (Div. 2) B 猜
- C与Python变量的区别