详解HTML中的表格标签
详细代码如下:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>表格制作</title>
</head>
<body>
<table bgcolor="black" width="500px">
<caption style="bold">学生信息</caption>
<thead>
<tr bgcolor="#a9a9a9" height="50px">
<th>姓名</th>
<th>年龄</th>
<th>学校</th>
<th>考试成绩</th>
<th>喜欢水果</th>
<th>经常上的网站</th>
</tr>
</thead>
<tbody>
<tr bgcolor="white" align="center" height="30px">
<td align="left">张三</td>
<td>22</td>
<td>西安工业大学</td>
<td>87</td>
<td>桃子</td>
<td>
<a href="http://www.baidu.com/">百度 </a>
<a href="http://www.sina.com/">新浪</a>
</td>
</tr>
<tr bgcolor="white" align="center">
<td align="left">李四</td>
<td>23</td>
<td rowspan="2">上海交通大学</td>
<td>85</td>
<td>苹果</td>
<td>
<a href="https://www.taobao.com/">淘宝 </a>
<a href="https://www.jd.com/">京东</a>
</td>
</tr>
<tr bgcolor="white" align="center">
<td align="left">王刚</td>
<td>45</td>
<!-- <td>上海海洋大学</td> -->
<td>86</td>
<td>香蕉</td>
<td>
<a href="http://www.163.com/">网易</a>
<a href="http://www.sina.com/">新浪</a>
</td>
</tr>
</tbody>
<tfoot>
<tr bgcolor="white">
<td >总分</td>
<td></td>
<td></td>
<td align="center">258</td>
<td></td>
<td></td>
</tr>
</tfoot>
</table>
</body>
</html>
注意事项:
1.宽度和高度属性
可以给table和td标签使用
2.水平对齐和垂直对齐
水平对齐可以给table和td使用
垂直对齐只能给tr和td标签使用
3.外边距和内边距属性
只能给table使用
4.表格分类
表格的标题
表格的表头信息
表格的主题信息
表格的叶尾信息
//必须写在table标签中,紧跟在table后面
5.单元格合并(添加td属性)
colspan="x"水平合并X个单元格,同时删除多余的
rowspan="x"垂直合并X个单元格,同时删除多余的
单元格都是向后或者想下合并的
详解HTML中的表格标签的更多相关文章
- 详解WordPress中简码格式标签编写的基本方法
WordPress 简码是一种类似于论坛标签的东西,格式类似于把尖括号换成中括号的 Html 标签.简码很多人叫做短代码,但官方的翻译应该是简码,在这里纠正一下. 简码的开发的逻辑比较简单,主要就是添 ...
- Usermod 命令详解 ------工作中修改shell时用 usermod -s /bin/csh home
Usermod 命令详解 2012-09-11 11:01:36 标签:usermod 原创作品,允许转载,转载时请务必以超链接形式标明文章 原始出处 .作者信息和本声明.否则将追究法律责任.htt ...
- java 乱码详解_jsp中pageEncoding、charset=UTF -8"、request.setCharacterEncoding("UTF-8")
http://blog.csdn.net/qinysong/article/details/1179480 java 乱码详解__jsp中pageEncoding.charset=UTF -8&quo ...
- CSS学习笔记(9)--详解CSS中:nth-child的用法
详解CSS中:nth-child的用法 前端的哥们想必都接触过css中一个神奇的玩意,可以轻松选取你想要的标签并给与修改添加样式,是不是很给力,它就是“:nth-child”. 下面我将用几个典型的实 ...
- 用IDEA详解Spring中的IoC和DI(挺透彻的,点进来看看吧)
用IDEA详解Spring中的IoC和DI 一.Spring IoC的基本概念 控制反转(IoC)是一个比较抽象的概念,它主要用来消减计算机程序的耦合问题,是Spring框架的核心.依赖注入(DI)是 ...
- 使用IDEA详解Spring中依赖注入的类型(上)
使用IDEA详解Spring中依赖注入的类型(上) 在Spring中实现IoC容器的方法是依赖注入,依赖注入的作用是在使用Spring框架创建对象时动态地将其所依赖的对象(例如属性值)注入Bean组件 ...
- (数据科学学习手札140)详解geopandas中基于pyogrio的矢量读写引擎
本文示例代码已上传至我的Github仓库https://github.com/CNFeffery/DataScienceStudyNotes 1 简介 大家好我是费老师,前不久我在一篇文章中给大家分享 ...
- jQuery:详解jQuery中的事件(二)
上一篇讲到jQuery中的事件,深入学习了加载DOM和事件绑定的相关知识,这篇主要深入讨论jQuery事件中的合成事件.事件冒泡和事件移除等内容. 接上篇jQuery:详解jQuery中的事件(一) ...
- 图文详解Unity3D中Material的Tiling和Offset是怎么回事
图文详解Unity3D中Material的Tiling和Offset是怎么回事 Tiling和Offset概述 Tiling表示UV坐标的缩放倍数,Offset表示UV坐标的起始位置. 这样说当然是隔 ...
随机推荐
- 生产环境下JAVA进程高CPU占用故障排查---temp
问题描述:生产环境下的某台tomcat7服务器,在刚发布时的时候一切都很正常,在运行一段时间后就出现CPU占用很高的问题,基本上是负载一天比一天高. 问题分析:1,程序属于CPU密集型,和开发沟通过, ...
- zabbix proxy安装及使用
首先我萌先理解下为什么要突然冒出zabbix proxy 它是一个代理,也就是agent与server的中间层,他会代替server收集agent的数据保存起来,然后推送给server,那么很明显,它 ...
- PHP开发api接口 -- 安全验证 生成签名
转载博客 ————. http://blog.csdn.net/li741350149/article/details/62887524 REST模式中HTTP请求方法(GET,POST,PUT,DE ...
- ImportCommon
using System; using System.Collections.Generic; using System.ComponentModel.DataAnnotations; using S ...
- project工期出现小数问题
进入“选项”,点击“日程”,将默认“开始”.“结束”时间调整为“9点~18点.原为PREJECT 日历 (注意是日历~!!)默认的“8点~17点”,与preject系统默认时间“9点~18点”有差别~ ...
- 关于在项目中遇到MySQL数据库死锁的问题
在MySQL中, 当一个事务去更新某条数据, 还没有提交的时候, 第二个事务去更新该数据, 则会出现等待获取锁超时异常: >> Lock wait timeout exceeded; tr ...
- jQuery.ajax各种参数及属性设置
$.ajax({ type: "post", url: url, dataType:'html', success: funct ...
- 《剑指offer面试题4》替换空格——实现函数把字符串中每个空格替换成“%20”
思路: 例如把we are happy这个字符串中所有空格替换成"%20",最直接的做法是从头开始扫苗,遇到空格就替换,并且把空格后面的字符都顺序后移.复杂度O(n^2). 重要思 ...
- 使用vs2019进行Linux远程开发
通常,当我们开发Linux程序时有两种方案: 在Linux上直接编写程序并进行运行测试和调试 在Windows或Mac OS X上借助工具进行远程开发 虽然我自己是在Linux环境上直接进行开发的,但 ...
- C++设计模式之工厂方法模式
来自:http://blog.csdn.net/pangshaohua/article/details/38912555 参考写的一个工厂demo 1.定义"背景风格的抽象类".& ...