详解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坐标的起始位置. 这样说当然是隔 ...
随机推荐
- js的浅克隆和深克隆
谈一谈个人对js浅克隆和深克隆的区别. 之前也看到很多博客在写,当然也有写的非常好的,但是个人觉得既然要分享就不要写的太深奥,尽量以简单易懂为主. 浅克隆其实就是 对象A = 对象B:如果改变了对象B ...
- 洛谷 1541 乌龟棋——dp
题目:https://www.luogu.org/problemnew/show/P1541 以用了几张牌为阶段.注意知道了用了4种牌各几张后,当前位置就是确定的,所以不用记录什么的. #includ ...
- 《Java多线程编程核心技术》读后感(一)
1.继承Thread package First; public class MyThread extends Thread { public void run() { super.run(); Sy ...
- java读取文件:文本文件
一般使用串行方式读出或者写入文件.总的来说,使用输入流把文件内容读入内存,使用输出流把内存中的信息写出到文件.这些类位于java.io包下.输入和输出的类和方法往往是对应的 文本文件 先了解如何读写文 ...
- g2o使用bug总结
g2o进行3d2d优化的时候,设置优化图的边时,注意setVertex()中顶点的顺序. void setVertex(size_t i, Vertex* v) { assert(i < _ve ...
- 3.15-3.21 hive项目实战
一.创建表并导入日志数据,引出问题 ##建表 hive (default)> create table IF NOT EXISTS default.bf_log_src( > remote ...
- 取消IE增强的安全配置
在window server里用ie各种信任添加很麻烦 可以通过如下方式取消IE增强设置: 如,在Server2008中,点击快速启动栏里面的服务器管理器图标,进入服务器管理器.选择配置 IE ESC ...
- LeetCode: 476 Number Complement(easy)
题目: Given a positive integer, output its complement number. The complement strategy is to flip the b ...
- POJ3264 【RMQ基础题—ST-线段树】
ST算法Code: //#include<bits/stdc++.h> #include<cstdio> #include<math.h> #include< ...
- lightoj1087 【线段树】
题意: 给你n个数,然后给你q个询问,有两种询问: a: 表示在右边插入一个数 c:表示从左边拿出一个数,然后输出: 思路: 一开始在想,自己手上的黑科技:线段树和树状数组 线段树上的操作: 求区间最 ...