html css项目实战（前端之HTMLCSS表格的写法）

前端之HTML CSS表格的写法

页面的表格

什么地方会使用表格？

在过去的时候，使用表格对页面进行布局会出现表格套表格的部分。

现在我们使用表格做课程表或很明显的表格的部分。

表格最基本的标签。

表格需要使用table标签。

我们表格用<tr></tr>表示一行。

用<tb></tb>表示一个单元格。

知道这些呢？就可以完成最简单的单元格了。

在<table></table>的标签内只要有几行就要写几个<tr></tr>，而<tr></tr>内又包含着<tb></tb>。

比如我们要写一个游戏的排行榜。

这个就是我们写的代码

这个就是我们写完在网页里呈现的效果

这里我们刚刚只写了第一行的单元格，那么我们来继续下面的步骤。

我们要在<tr></tr>的标签内在继续写三个单元格，这个时候我们可以打出td*3就会直接出现三个td的标签。

对应的网页

但是我们现在做的表格是没有边框的，那么要怎样才能做出表格的边框呢？

我要在

<tableborder=”1”>

<tr>

<tb>排名</tb>

<tb>游戏名</tb>

<tb>下载量</tb>

</tr>

<tr>

<tb>1</tb>

<tb>欢乐斗地主</tb>

<tb>10000</tb>

</tr>

<tr>

<tb>2</tb>

<tb>英雄联盟</tb>

<tb>8000</tb>

</tr>

<tr>

<tb>3</tb>

<tb>吃鸡</tb>

<tb>6000</tb>

</tr>

</table>

这时候我们的单元格里就有了表格的边框了，但是仔细看我们的每个单元格都是双层的那么怎么才能做成单层的呢？

<tableborder=”1”>这里我们就知道给单元格加上边框是要在<table>的标签上加上border=”1”。

单元格与单元格中间的距离用cellspacing=”来设置。

单元格的边框合并成一条线用给torder-collapsecollapse

<tableborder=”1”width=”500”>这个时候就可以改变表格的宽度大小。

<tableborder=”1”width=”500”height=”300”>后面的 height就是可以改变我们单元格的高度。

我们想让单元格每行或者每列大小不一样的时候就可以加在<tb></tb>的里面。

,