html5之表格元素

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>表格元素</title>
 6 </head>
 7 <body>
 8 <h4>设置表格背景色为黑色,单元格间距为1px<br/>通过设置背景色为黑色可以实现边框效果</h4>
 9 <table style="background-color: #cccccc;border-collapse: separate;border-spacing: 1px;text-align: center" >
10     <caption><b>疯狂java体系图书</b></caption>
11     <!--定义所有列的背景色都是白色-->
12     <colgroup style="background-color: white">
13         <!--设置第一列宽160px-->
14         <col style="width: 160px"/>
15         <!--定义横跨两列,设置这两列各宽100px-->
16         <col span="2" style="width:100px"/>
17     </colgroup>
18     <thead>
19     <tr>
20         <th>书名</th>
21         <th>作者</th>
22         <th>价格</th>
23     </tr>
24     </thead>
25     <tfoot>
26     <tr>
27         <td colspan="3" style="text-align: right">现总计:2本图书</td>
28     </tr>
29     </tfoot>
30     <tbody>
31     <tr>
32         <td>疯狂java讲义</td>
33         <td>李刚</td>
34         <td>109</td>
35     </tr>
36     <tr>
37         <td>轻量级Java EE企业应用实战</td>
38         <td>李刚</td>
39         <td>89</td>
40     </tr>
41     </tbody>
42 </table>
43 </body>
44 </html>

<colgroup>组织多个<col/>元素,指定属性对它包含的所有<col/>元素有效,可指定id,style,class等通用属性

<col/>用于制定表格一列或者多列的整体属性,span属性指定受影响列数,可指定id,style,class等通用属性

设置表格背景色为黑色,单元格间距为1px
通过设置背景色为黑色可以实现边框效果

疯狂java体系图书
书名 作者 价格
现总计:2本图书
疯狂java讲义 李刚 109
轻量级Java EE企业应用实战 李刚 89
时间: 2024-10-17 08:38:33

html5之表格元素的相关文章

第六十三节,html表格元素

html表格元素 学习要点:     1.表格元素总汇     2.构建表格解析     本章主要探讨HTML5中表格元素的用法.表格的主要用途是以网格的形式显示二维数据.   一.表格元素总汇     表格的基本构成最少需要三个元素:<table>.<tr>.<td>,其他的一些作为可选辅 助存在.         元素名称                                  说明           table        表示表格         

HTML5:表格

表格的作用是显示二维数据,在HTML5中不再允许用表格控制页面内容的布局,而是采用新增的CSS表格特性(这里不涉及CSS,将在后面介绍).下面主要介绍用于制作表格的HTML元素. 构建表格 表格的基本元素包括:table.tr和td.table表示HTML文档中的表格,支持border属性,用于定义表格边框的宽度:tr表示表格中的行:td表示表格中的单元格,包括如下属性: 1)colspan:规定单元格可横跨的列数: 2)rowspan:规定单元格可横跨的行数: 3)headers:规定与单元格

html5制作表格

今天学了html5制作表格的方法,其中,有一些基础的用法要给大家介绍一下: 表格的基本格式 格式: <table> <tr>… <th>…</th> <th>…</th> <th>…</th> </tr> <tr> <td>…</td> <td>…</td> <td>…</td> </tr> </t

HTML5 画布canvas元素

HTML5 画布canvas元素 HTML5的canvas元素以及随其而来的编程接口Canvas API应用前景极为广泛.简单地说,canvas元素能够在网页中创建一块矩形区域,这块矩形区域可以成为画布,这其中可以绘制各种图形.可别小看了这个画布,它能实现无限的可能性.接下来我们从最简单的部分开始,逐步认识Canvas的强大功能. 1.在页面中添加canvas元素: 默认情况下,Canvas所创建的矩形区域大小为宽300像素,高150像素,不过我们可以使用width和height属性来自定义画布

javascript 对表格元素的快捷操作

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content=

HTML(二):表格元素

表格元素的作用:用来格式化显示数据. 一.表格的基本结构 表格的基本语法:<TABLE border="设置表格边框尺寸大小" width="" cellpadding="" cellspaning="">   <TR align="对齐方式">      <TD align="">         单元格内容      </TD>    

今天学习了无序列表和有序列表和使用HTML5创建表格

ol建立有序列表,该列表可以用设置type="A/a" 其语法架构为 <ol> <li></li> <li></li> </ol> Ul建立无序列表, 该列表可以用设置type=" disc/circle/square" 其语法架构为 <ul> <li></li> <li></li> </ul> 创建表格其基本属性有 Cel

HTML5中canvas元素,绘制圆形

HTML5中canvas元素,绘制圆形需要使用路径,开始时要取得图形上下文,首先使用路径来勾勒图形的轮廓,然后设置颜色,进行绘制. <!DOCTYPE html> <head> <meta charset="UTF-8" /> <script>     function draw(id) {         var canvas = document.getElementById(id);         if (canvas == nu

HTML5 &lt;template&gt;标签元素简介

一.HTML5 template元素初面 <template>元素,基本上可以确定是2013年才出现的.干嘛用的呢,顾名思意,就是用来声明是"模板元素". 目前,我们在HTML中嵌入模板HTML,往往是类似这样的写法: <script type="text/template"> // ... </script> 实际上,并不存在type="text/template"这样的标准写法,<template&g