HTML之如何创建表格?
表格由 <table> 标签来定义。
每个表格均有若干行(由 <tr> 标签定义),每行被分割为若干单元格(由 <td> 标签定义)。
字母 td 指表格数据(table data),即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。
border属性指定有无边框,不写border属性或者赋值为0,创建的表格都将没有边框;赋值的大小决定了边框的粗细。
th属性设置表头,如果不把表头特殊设置,那么显示出来的表头会和内容一样的格式。
1、下面写两个简单的没有边框的表格
<h5>第一个表格</h5><table border="0"> <!------------把border赋值为0,这个表格没有边框-->
<tr>
<th>name</th> <!-------------------利用 <th>将这个值设置为表头-->
<th>sex</th> <!-------------------利用 <th>将这个值设置为表头-->
</tr>
<!-----------------------------------这是第一行--><tr>
<td>张三</td>
<td>女</td>
</tr></table>
<!----------------------------------这是第二行-->
<h5>第二个表格</h5>
<table> <!------------不写border这个属性,这个表格也没有边框-->
<tr>
<th>name</th> <!-------------------利用 <th>将这个值设置为表头-->
<th>sex</th> <!-------------------利用 <th>将这个值设置为表头-->
</tr>
<!-----------------------------------上面这是第一行<tr>-->
<tr>
<td>张三</td>
<td>女</td>
</tr> <!------------------------------第二行-->
</table>
效果:
2、写一个有边框的表格(border的赋值决定了边框的粗细)
给表格设置标题,用<caption>。
假如表格中有空值,那么在这个单元格里插入一个空格占位符“ ",可以让单元格保持完整。
<h5>第三个表格</h5>
<caption>人员信息表</caption> <!---------------------给表格设置一个标题--><table border="1"> <!---------------------border="1",表格有边框-->
<tr>
<th>name</th>
<th>sex</th>
</tr>
<tr>
<td>张三</td>
<td>女</td>
</tr>
<tr>
<td> </td> <!----------------这个单元格没有值,放一个空格占位符 在这里-->
<td>unknown</td>
</tr>
</table>
效果:
3、下面设置一个横向跨列和一个纵向跨行的表格
<table border="1">
<tr>
<th>姓名</th>
<th colspan="3">成绩</th> <!-------------横向跨列,3表示跨了3列-->
</tr>
<tr>
<td>张丹</td> <!--------------这是第一列---姓名-->
<td>98</td> <!--------------这是第二列---成绩1-->
<td>56</td> <!----------------这是第三列---成绩2-->
<td>87</td> <!--------------这是第四列---成绩3-->
</tr>
</table>
效果:
某一个单元格纵跨两行,使用 rowspan="2"来设置,数字代表跨的行
<table border="1">
<tr>
<th rowspan="3">周一</th> <!--------这是第一行,纵向跨行,3表示跨了3行---这个表头算第一行的第一个单元格-->
<td>开早会</td> <!-------------这算是第一行的第二个单元格-->
</tr>
<tr> <!--------------这是第二行,第一个单元格被上面的“周一”占了-->
<td>拜访客户</td> <!-------------这是第二行的第二个单元格-->
</tr>
<tr> <!-------------这是第三行,第一个单元格被上面的“周一”占了-->
<td>修改产品介绍ppt</td> <!-------------这是第三行的第二个单元格-->
</tr>
</table> <!-------总之,写表格,不管是表头是横向还是纵向,顺序都是从左往右,从上往下-->
效果:
4、HTML的各项标签可以随意嵌套。
4.1在单元格里嵌套列表
<table border="2">
<tr>
<td>房间里包含的水果
<li>香蕉</li>
<li>葡萄</li>
<li>番茄</li>
</td>
</tr>
</table>
效果:
4.2在单元格里嵌套单元格
<table border="2">
<tr>
<td>
<p>我要做的事</p>
//-------------------------
<table border="1">
<tr>
<th rowspan="3">周一</th>
<td>做PPT</td>
</tr>
<tr>
<td>开会</td>
</tr>
<tr>
<td>写报告</td>
</tr>
</table>
//---------------------中间是一个完整的单元格
</td>
</tr>
</table>
效果:
5、更改表格样式
5.1单元格样式之----单元格边距,保证内容与边框的距离
<table border="2" cellpadding="10"> //----------使用cellpadding来设置单元格边距
<tr>
<td>
<p>我要做的事</p>
<table border="1" cellpadding="5"> //----------使用cellpadding来设置单元格边距
<tr>
<th rowspan="3">周一</th>
<td>做PPT</td>
</tr>
<tr>
<td>开会</td>
</tr>
<tr>
<td>写报告</td>
</tr>
</table>
</td>
</tr>
</table>
效果:
5.2单元格样式之----给表格添加背景颜色或图片(颜色用bgcolor;图片用background)
<table border="2" cellpadding="10" bgcolor="yellow"> <!----------使用bgcolor来设置背景颜色为黄色-->
<tr>
<td>
<p>我要做的事</p>
<table border="1" cellpadding="5"
background="http://images.missyuan.com/attachments
/day_080420/20080420_ba6f1b3324576143d62brfIPM291T4da.jpg"> <!---------使用background来设置背景图片-->
<tr>
<th rowspan="3">周一</th>
<td>做PPT</td>
</tr>
<tr>
<td>开会</td>
</tr>
<tr>
<td>写报告</td>
</tr>
</table>
</td>
</tr>
</table>
效果:
5.3给某一个单元格单独设置背景
<table border="2" cellpadding="10" bgcolor="yellow"> <!----------使用bgcolor来设置表格背景颜色为黄色-->
<tr>
<td>
<p>我要做的事</p>
<table border="1" cellpadding="5">
<tr>
<th bgcolor="white" rowspan="3">周一</th> <!--给标题这一个单元格设置背景颜色-->
<td>做PPT</td>
</tr>
<tr>
<td>开会</td>
</tr>
<tr>
<td background="http://images.missyuan.com/attachments
/day_080420/20080420_ba6f1b3324576143d62brfIPM291T4da.jpg">写报告</td> <!---------使用background来设置单元格背景图片-->
</tr>
</table>
</td>
</tr>
</table>
效果:
5.4在表格中排列内容--让表格更好看(align)
<table width="400" border="1">
<tr>
<th align="left">电表名称</th>
<th align="center">Ua(V)</th>
<th align="center">Ub(V)</th>
<th align="center">Uc(V)</th>
</tr>
<tr>
<td align="left">2018-6-19 00:00</td>
<td align="right">232.2</td>
<td align="right">239.0</td>
<td align="right">231.8</td>
</tr>
<tr>
<td align="left">2018-6-19 05:00</td>
<td align="right">232.6</td>
<td align="right">233.2</td>
<td align="right">234.3</td>
</tr>
<tr>
<td align="left">2018-6-19 10:00</td>
<td align="right">232.6</td>
<td align="right">232.2</td>
<td align="right">234.6</td>
</tr>
</table>
效果:
上面这些功能,可以根据实际情况随意嵌套,如同搭积木一样,大家可以根据自己喜好利用这些功能写出炫酷的表格!阿弥陀佛~~~
HTML之如何创建表格?相关推荐
- office技巧:Word如何快速的创建表格
Word如何创建表格 创建表格的方法有很多种,我们可以通过Word提供的插入表格功能创建表格,也可以手动绘制表格,甚至还可以将输入好的文字转换为表格,灵活掌握这些方法,便可创建自己需要的表格. 一, ...
- C# 如何在PDF文档中创建表格
表格能够直观的传达数据信息,使信息显得条理化,便于阅读同时也利于管理.那在PDF类型的文档中如何来添加表格并且对表格进行格式化操作呢?使用常规方法直接在PDF中添加表格行不通,那我们可以在借助第三方组 ...
- FineUIMvc随笔(1)动态创建表格列
声明:FineUIMvc(基础版)是免费软件,本系列文章适用于基础版. <FineUIMvc随笔>目录 FineUIMvc随笔(1)动态创建表格列 FineUIMvc随笔(2)怎样在控件中 ...
- html 动态创建表格,jquery动态创建表格
html代码 js代码 var myObj = [{ "testname": "张三1111", "sex": "男", ...
- dom操作表格示例(dom创建表格)
一.使用HTML标签创建表格: 复制代码 代码如下: <tableborder="1"width="300"> <caption>人员表 ...
- 动态创建表格给同一个标签创建点击事件并让点击事件操作内容不一样
动态创建表格给同一个标签创建点击事件,每个点击事件操作的元素不一样. 现在有这样的需求,点击"查看详细"显示或隐藏标签.要实现这样的效果就要给点击标签添加两个属性,一个属性是nam ...
- javascript动态创建表格:新增、删除行和列
利用js来动态创建表格有两种格式,appendChild()和insertRow.insertCell().两种方式其实差不多,但第一种有可能在IE上有问题,所以推荐大家使用第二种了,直接说吧. 1. ...
- SQL创建表格——手写代码
打开phpstudy,打开Navicat for MySQL,进入要创建表格的数据库,点击上方"查询"按钮,"创建查询",即可输入代码进行创建. 例: crea ...
- mysql创建新表失败_麻烦给我看一下为什么MySQL创建表格失败嘛
该楼层疑似违规已被系统折叠 隐藏此楼查看此楼 改为 $con=mysql_connect('localhost','root',''); if(!$con) die('连接数据库失败'); mysql ...
- java表格的创建_Java创建表格实例详解 原创
表格是最常用的数据统计形式之一,在 swing 中 由 JTable 类实现表格.接下来,我们看看怎么利用 JTable 创建表格. 在 JTable 类中除了默认的构造方法外,还提供了利用指定表格列 ...
最新文章
- CMap在用CString做key类型时,ARG_KEY要选LPCTSTR
- IntelliJ IDEA常用快捷键小结
- 系统架构师笔记(1)
- jQueryEasyUi验证
- layer之jquery 弹窗插件 (最后版本v1.8.5)
- php如何拼接数组,PHP怎么合并数组
- 减少浏览器的兼容性问题
- latex中erro:extra alignment tab has changed to\cr但列数没错的解决方法
- python的setting怎么找_python代码中使用settings
- Kafka性能测试实例
- storm中的RotatingCache技术
- RDKit入门教程(1)——RDKit 安装 (Win10)
- Go_io.Reader
- 软件工程中国大学慕课mooc北京大学 答案
- android 读写文件 简书,Android 读取asset文件
- 【C++ 程序】 TVJ Complex Calculator (v 2.2) 复数计算器
- 2022淘宝天猫京东头部主播消失后的618没有头部主播怎么领618红包?
- Spark的容错机制
- 这些支付的负面记录,分分钟影响你的贷款
- LUNA16图片提取