html基础学习第八节-表格的定义基础

说在前面

html的教程已经很久没有更新了,真的很抱歉,最近一直忙于网站和其他事情而忽略了这个我一开始就写的教程

现在,我已经不适用之前的整列模式,因为现在开始忙了,没时间弄那么好的规划,虽然那样可以增加可读性,可是可读性带来的却是我排版的繁琐,说简单也简单,不过那样我就需要整理好了再写教程,这样花费时间不说,而且容易遗忘要怎么继续写,好了,废话说道这里,我们现在开始来讲讲表格的定义

我们为什么要学习表格,我们学网页设计又不是弄个word?

对,没错,我又不懂办公office,甚至我都懒得学office,但是表格只是office的一部分,表格不是office特有的,表格是网站布局的一种形式,也可以说是通用的形式,怎么说呢?你看看网站的一个个模块,这就是一个表格,你可以看看php程序源码,里面几乎遍布了一堆div,为什么,因为表格的定义起了很大的布局作用,当然还有CSS!

表格有什么好学,直接在可视化模式下新建不就得了?

说这句话的人,你可以直接关闭这个站点,因为你是不想学习的人,对,科技是让人更简单的处理事务,但是,不是让你真的去偷懒什么都不学的,而且,表格在某些情况下是不能直接通过编辑器的可视化去布局,因为有很多情况,需要我们去想象,去拼接的,要做好布局,就必须学会表格的定义,前面有的定义,你甚至可以去html手册里查询,但是,表格这块,是重点,我前面的你甚至可以不用去学,因为重点在后面这里

好了,以后我也会利用这种对答的方式去写教程,我觉得这种方式写教程有助于别人理解这一课的重要性,当然不是哪一个不重要,都是重要的,只是重要在哪个地方,不重要的我肯定不写【PS:吐血,废话了太多】

表格如何定义?

表格主要由三个主要单词去定义,我说主要,是说还有其他单词组合进来参与定义的,一个是table,这个定义下面的内容是一个表格,好比center定义下面的内容是居中处理一个意思,然后是tr是定义一行,也就是一行的表格,td是定义一列,也就是一列的表格,border这里定义表格的边框线粗细定义为一个像素,不定义的话应该看不见吧,我也没试过,大家试试看下面来看一组简单的表格代码

<table border="1">

<tr>

<td>A1</td><td>A2</td><td>A3</td>

</tr>

<tr>

<td>B1</td><td>B2</td><td>B3</td>

</tr>

</table>

结果显示如下的一个表格

A1 A2 A3
B1 B2 B3

这就是一个简单的表格,大家可以看到,html在这里继续继承他的崁套模式,也就是先定义一个大体的表格,然后表格里面定义一个大体的一行,一行里面又定义一列一列,这样的形式去定义一个表格,大家看懂了吗?如果不懂,反复的去看那段代码就是了,然后我们下面来说说高级一点的定义

先来用colspan来做左右两个表格合并,在word下是很简单的,html这里也很简单,只要一个定义就可以,看看代码

<table border="1">

<tr>

<td>A1</td><td colspan="2">A2A3</td>

</tr>

<tr>

<td>B1</td><td>B2</td><td>B3</td>

</tr>

</table>

结果如下【看上面红色部分的差异】

A1 A2A3
B1 B2 B3

这里大家可以看到代码这里,colspan等于2就定义了横向两个合并为一个单元格,也就是格子,只需要在td这里空一行然后加上等于几就可以定义几个格子合并

然后我们来看看下面的那个竖向的合并怎么定义,其实也很简单,用一个rowspan就可以定义到,看如下代码

您可以选择一种方式赞助本站

支付宝扫一扫赞助

微信钱包扫描赞助

目前评论:2   其中:访客  2   博主  0

  1. avatar yumanutong 5

    不用登录就可以回帖,都没人回帖,伸手党太多了吧,汗

  2. avatar Jr 4

    我汗。。。。板凳

评论加载中...

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

图片 表情