表格的基本语法：

<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核心标签之表格标签(一)的更多相关文章

  1. HTML常用标签与表格标签

    超链接标签: <a href="超链接地址" target="_blank">超链接的文字</a> _blank或new是在新网页中打开 ...

  2. HTML-常用标签与表格标签

    超链接标签: <a href="超链接地址" target="_blank">超链接的文字</a> _blank或new是在新网页中打开 ...

  3. HTML高级标签之表格标签

    前面学习了一下HTML的经常使用标签, 今天開始高级标签之路! 一.表格标签 1.作用: 创建一张表格 2.各属性作用: <table cellspacing="0" cel ...

  4. HTML入门(转义字符、行内样式和块级元素、定位、锚点、跑马灯标签、图片标签、表格标签的讲解)

    一.转义字符由特殊字符包裹的文本 会当做标签去解析 对应不换行空格 对应全角空格 em是字体排印学的计量单位,相当于当前指定的点数.其占据的宽度正好是1个中文宽度,而且基本上不受字体影响.<对应 ...

  5. Day46（列表标签，表格标签，表单标签，css的引入方式，css选择器）

    一.列表标签 列表标签分为三种. 1.无序列表<ul>,无序列表中的每一项是<li> 英文单词解释如下: ul:unordered list,“无序列表”的意思. li:lis ...

  6. HTML基本标签，表格标签，框架标签

    1.html简介 1.1什么是html html全称:Hyper Text Markup Language(超文本标记语言) 备注:           a.超文本:页面内可以包含图片.链接,甚至音乐 ...

  7. HTML核心标签之表格标签(二)

    基本用法: <ul type="cir"> <li>显示数据</li> <li>显示数据</li> </ul> ...

  8. 讲课笔记1——meta标签、表格标签

    图片属性:src(source): 图片的来源(路径),可以放置本地图片,也可以放网上的图片的url地址 [相对路径:        ./:当前目录            ../:跳出当前目录,到上一 ...

  9. HTML的列表标签和表格标签

    网页的列表和表格 列表的分类 无序列表 有序列表 自定义列表 有序列表 <!--有序列表--><ol>    <li>辽宁</li>    <li ...

随机推荐

  1. CTF---Web入门第十三题 拐弯抹角

    拐弯抹角分值:10 来源: cwk32 难度:易 参与人数:5765人 Get Flag:2089人 答题人数:2143人 解题通过率:97% 如何欺骗服务器,才能拿到Flag? 格式:CTF{} 解 ...

  2. HDU 1711 Number Sequence(KMP裸题，板子题，有坑点)

    Number Sequence Time Limit: 10000/5000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others) ...

  3. Java入门篇（四）——数组

    上篇在foreach中有引入一个数组的概念,数组是最为常见的一种数据结构,是相同类型的.用一个标识符封装到一起的基本类型数据序列或对象序列. 数组是具有相同数据类型的一组数据的集合,根据维数不同可以分 ...

  4. Oracle实战笔记（第三天）

    导读 今天的主要内容有:java连接Oracle.事务.Oracle中的事务处理.Oracle函数. 一.Java连接Oracle的两种方式 第一种:桥连接(JDBC_ODBC)(不推荐) 1.准备工 ...

  5. 学习JVM-GC收集器

    1. 前言 在上一篇文章中,介绍了JVM中垃圾回收的原理和算法.介绍了通过引用计数和对象可达性分析的算法来筛选出已经没有使用的对象,然后介绍了垃圾收集器中使用的三种收集算法:标记-清除.标记-整理.标 ...

  6. Python3 字符串格式化

    1.字符串的格式化: 按照统一的规格去输出成为一个新的字符串 2.字符串格式化的方法: 1)format方法 fomat()有两个参数位置参数和关键字参数用中括号括起来{ } #{0}{1}为位置参数 ...

  7. QT5 Thread线程

    QT5 Thread线程继承QThread方式 一.首先分析一下 QTimer Class与 Sleep()函数之间的秘密 QTimer *t = new QTimer(*parent); //创建Q ...

  8. 【开发技术】refactor 重构----实现文件改名

    当我们要改类名或接口名时,可能会遇到该类(接口)在其它文件中也有使用的情况,如一个个找比较麻烦也容易漏,这里推荐使用右键refactor->rename进行修改.

  9. 想要学习jQuery却不知从何开始？本文为你精选5个例子帮你快速成为jQuery大师

    本文阅读对象:WEB前端开发初学者.jQuery初学者.JavaScript初学者 本文目的:jQuery真正入门.快速入门.快速搞清楚jQuery是什么,同时为你的jQuery大师之路开启第一道门. ...

  10. nodejs http小爬虫

    本课程用nodejs写一个http小爬虫,首先科普一下,爬虫就是把网上的网页代码给弄下来,然后纳为己用.目前最大的爬虫:百度快照等的. 下面直接上代码 示例一: var http = require( ...