HTML核心标签之表格标签(一)
表格的基本语法：
<body>
<table>
<tr><td></td><td></td></tr>
<tr><td></td><td></td></tr>
</table>
</body>
说明：
tr表示一行
td表示一列
现在想完成一个三行三列的表格，应该怎么做呢？？
代码如下：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<table border="4px" width="500px" bgcolor="#ff0">
<tr><td>第一行第一列</td><td>第一行第二列</td><td>第一行第三列</td></tr>
<tr><td>第二行第一列</td><td>第二行第二列</td><td>第二行第三列</td></tr>
<tr><td>第三行第一列</td><td>第三行第二列</td><td>第三行第三列</td></tr>
</table>
</body>
</html>
用浏览器打开后，效果如下：
那么现在问题来了，上面的代码打印出来的表格，里面的字体不居中，应该怎么办呢？？
在<table>标标签里加一个'align="center"'属性试吧．
修改后的代码如下：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<table align="center" border="4px" width="500px" bgcolor="#ff0">
<tr><td>第一行第一列</td><td>第一行第二列</td><td>第一行第三列</td></tr>
<tr><td>第二行第一列</td><td>第二行第二列</td><td>第二行第三列</td></tr>
<tr><td>第三行第一列</td><td>第三行第二列</td><td>第三行第三列</td></tr>
</table>
</body>
</html>
来看看执行效果:
发现修改之后的表格处在整个页面的中间位置，而且关键的是每行的字体仍然不是中间对齐的，这样仍然没有达到想要的结果，看来加上这个选项也是不行的．
查看W3C的官方手册得知，align这个功能现在已经不被赞成使用了．
有什么好的办法呢？？
来看下面的代码：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<table style="margin:0 auto;" border="4px" width="500px" bgcolor="#ff0">
<tr><td>第一行第一列</td><td>第一行第二列</td><td>第一行第三列</td></tr>
<tr><td>第二行第一列</td><td>第二行第二列</td><td>第二行第三列</td></tr>
<tr><td>第三行第一列</td><td>第三行第二列</td><td>第三行第三列</td></tr>
</table>
</body>
</html>
在这里添加了一个'margin:0 auto;'的选项．
这个选项的功能如下：
margin控制上下边距的功能，margin:0的功能是控制表格的上下边距为0,auto的功能是使表格左右居中．
刷新浏览器之后，表格中的字体还是没有达到想要的效果．
既然控制table这个功能达不到想要的效果，现在只能看下tr和td这两个标签了．
通过查手册可以知道，在tr这个标签中，也存在这个align这个属性，而且W3C官方组织没有不被赞成使用，现在在tr标签中添加这个属性试试吧．
修改后的代码如下:
<!DOCTYPE html>**
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<table style="margin:0 auto;" border="4px" width="500px" bgcolor="#ff0">
<tr align="center"><td>第一行第一列</td><td>第一行第二列</td><td>第一行第三列</td></tr>
<tr><td>第二行第一列</td><td>第二行第二列</td><td>第二行第三列</td></tr>
<tr><td>第三行第一列</td><td>第三行第二列</td><td>第三行第三列</td></tr>
</table>
</body>
</html>
刷新浏览器,修改后的效果如下:
可以看到,给第一个tr标签添加上align这个属性后,表格第一行中的字体已经居中了,已经有一点达到目的了,现在就把剩下的两个tr标签也添加上align这个属性试试看吧.
修改后的代码如下:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<table style="margin:0 auto;" border="4px" width="500px" bgcolor="#ff0">
<tr align="center"><td>第一行第一列</td><td>第一行第二列</td><td>第一行第三列</td></tr>
<tr align="center"><td>第二行第一列</td><td>第二行第二列</td><td>第二行第三列</td></tr>
<tr align="center"><td>第三行第一列</td><td>第三行第二列</td><td>第三行第三列</td></tr>
</table>
</body>
</html>
刷新浏览器后,得到的效果如下:
终于达到想要的效果了.
现在得到结论:如果希望每行的文字居中,可以在每行中添加align="center"这个属性.
现在效果是达成了,但是写了很多重复的代码,有没有其他的方案呢??
来看下面的代码:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<table style="margin:0 auto;text-align:center" border="4px" width="500px" bgcolor="#ff0">
<tr><td>第一行第一列</td><td>第一行第二列</td><td>第一行第三列</td></tr>
<tr><td>第二行第一列</td><td>第二行第二列</td><td>第二行第三列</td></tr>
<tr><td>第三行第一列</td><td>第三行第二列</td><td>第三行第三列</td></tr>
</table>
</body>
</html>
删除每个tr标签中的align="center"这个属性,在table标签的style标签中添加"text-align:center"这个属性,然后刷新浏览器可以看到,
表格中的字体仍然居中,还是达到想要的效果.
那现在想要让表格中的字体居右对齐,该怎么办呢??
很简单的,把上面的"text-align:center"中的"center"换成right就可以了.
修改之后的代码如下:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<table style="margin:0 auto;text-align:right" border="4px" width="500px" bgcolor="#ff0">
<tr><td>第一行第一列</td><td>第一行第二列</td><td>第一行第三列</td></tr>
<tr><td>第二行第一列</td><td>第二行第二列</td><td>第二行第三列</td></tr>
<tr><td>第三行第一列</td><td>第三行第二列</td><td>第三行第三列</td></tr>
</table>
</body>
</html>
刷新后的效果如下：
HTML核心标签之表格标签(一)的更多相关文章
- HTML常用标签与表格标签
超链接标签: <a href="超链接地址" target="_blank">超链接的文字</a> _blank或new是在新网页中打开 ...
- HTML-常用标签与表格标签
超链接标签: <a href="超链接地址" target="_blank">超链接的文字</a> _blank或new是在新网页中打开 ...
- HTML高级标签之表格标签
前面学习了一下HTML的经常使用标签, 今天開始高级标签之路! 一.表格标签 1.作用: 创建一张表格 2.各属性作用: <table cellspacing="0" cel ...
- HTML入门(转义字符、行内样式和块级元素、定位、锚点、跑马灯标签、图片标签、表格标签的讲解)
一.转义字符由特殊字符包裹的文本 会当做标签去解析 对应不换行空格 对应全角空格 em是字体排印学的计量单位,相当于当前指定的点数.其占据的宽度正好是1个中文宽度,而且基本上不受字体影响.<对应 ...
- Day46（列表标签，表格标签，表单标签，css的引入方式，css选择器）
一.列表标签 列表标签分为三种. 1.无序列表<ul>,无序列表中的每一项是<li> 英文单词解释如下: ul:unordered list,“无序列表”的意思. li:lis ...
- HTML基本标签，表格标签，框架标签
1.html简介 1.1什么是html html全称:Hyper Text Markup Language(超文本标记语言) 备注: a.超文本:页面内可以包含图片.链接,甚至音乐 ...
- HTML核心标签之表格标签(二)
基本用法: <ul type="cir"> <li>显示数据</li> <li>显示数据</li> </ul> ...
- 讲课笔记1——meta标签、表格标签
图片属性:src(source): 图片的来源(路径),可以放置本地图片,也可以放网上的图片的url地址 [相对路径: ./:当前目录 ../:跳出当前目录,到上一 ...
- HTML的列表标签和表格标签
网页的列表和表格 列表的分类 无序列表 有序列表 自定义列表 有序列表 <!--有序列表--><ol> <li>辽宁</li> <li ...
随机推荐
- 从好用到更好用 —— 2017 年又拍云 CDN 功能更新回顾
又拍云一直致力于为客户带来更好的服务,在 2017 年又拍云 CDN 服务进行了数次重大更新,在功能上更加全面.完善,进一步提升了 CDN 的稳定性与安全性. 在过去一年里又拍云 CDN 服务共进行了 ...
- 洛谷 P1553 数字反转（升级版）【字符串+STL stack】
P1553 数字反转(升级版) 题目描述 给定一个数,请将该数各个位上数字反转得到一个新数. 这次与NOIp2011普及组第一题不同的是:这个数可以是小数,分数,百分数,整数.整数反转是将所有数位对调 ...
- HDU 2084 数塔(简单DP入门)
数塔 Time Limit: 1000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others) Total Submiss ...
- 在R12下加载Java Bean，配置FORMS_WEB_CONFIG_FILE文件/通过AutoConfig实现Form Server配置文件的修改
1.定位模版文件$AD_TOP/bin/adtmplreport.sh contextfile=$CONTEXT_FILE target=$FORMS_WEB_CONFIG_FILE以上命令,通过查看 ...
- c++(非递归排序)
在上面一篇博客当中,我们发现普通查找和排序查找的性能差别很大.作为一个100万的数据,如果使用普通的查找方法,那么每一个数据查找平均下来就要几十万次,那么二分法的查找呢,20多次就可以搞定.这中间的差 ...
- IDC服务器的六大基础知识
无论企业或个人来说,一个是否适合自己的IDC运营商对于业务发展是至关重要的.然而很多用户对IDC行业一知半解,不太了解服务器的种类,更不知道选择什么样的服务器更适合自己了.今天编辑汇总了一些IDC所需 ...
- PhpStorm中如何使用Xdebug工具，入门级操作方法
http://blog.csdn.net/knight_quan/article/details/51953269 1.简介: PhpStorm是一个轻量级且便捷的PHP IDE,其提供的智能代码补全 ...
- 提交到svn服务器时，一直缓冲不，
1,服务器端url问题,正常:https://192.168.1.102:8443/svn/dedegls/ 错误:https:// ...
- 【编程技巧】一些 NSArray 的基本操作代码例子
/*---------------------------切分数组------------------------------*/ //从字符串分割到数组- componentsSeparatedBy ...
- 基于 HTML5 WebGL 的 3D 仪表数据监控
工控仪表重点发展基于现场总线技术的主控系统装置及智能化仪表.特种和专用自动化仪表:全面扩大服务领域,推进仪器仪表系统的数字化.智能化.网络化,完成 自动化仪表从模拟技术向数字技术的转变:推进具有自主版 ...