3.5、表格标签

马肤
这是懒羊羊

温馨提示:这篇文章已超过514天没有更新,请注意相关的内容是否还可用!

前言

今天讲的是html的表格标签,可能有的朋友会问为什么讲的这一点零散的东西,这些有什么用,我想说,其实我们把这些学习的整合在一块他就实现了一套精美的网页。后面我也会通过实战演练来告诉大家怎么整合怎么优化。离我们的编程梦越来越近了,希望大家坚持一下,学习不易我懂,但是学到了就是金钱。


3.5、表格标签,屏幕截图 2022-11-20 221039.png,html,css,标签,第1张



正文


这一课我们主要使用的代码是<table>、<tr>、<td> 及 <th> 四个标签

下面我来详细介绍一下这几个代码


演示代码

<table border="1">

   <tr>

     <th>名称</th>

     <th>官网</th>

     <th>性质</th>

   </tr>

   <tr>

     <td>VPS857</td>

     <td>https://www.857vps.cn/</td>

     <td> HTML</td>

   </tr>

    <tr>

     <td>C语言</td>

     <td>http://www.baidu.com/</td>

     <td>搜索</td>

     </tr>

   <tr>

      <td>当当</td>

     <td>http://www.dangdang.com/</td>

      <td>图书</td>

    </tr>

</table>


效果图




3.5、表格标签,屏幕截图 2022-11-20 221738.png,html,css,标签,第2张




但是这个表格我们看起来丑丑的对吧,那么多边宽,所以我们得优化这个代码使得这个边框边自然,变好看对不对。好了,我们现在开始优化

我这边打算增加以下表格边框属性,利用我们所学的css中的border-collapse 属性来设置表格的边框。


<table border="1" style="border-collapse: collapse;">         我们所添加的代码就是这个


   <tr>

     <th>名称</th>

     <th>官网</th>

     <th>性质</th>

   </tr>

   <tr>

     <td>VPS857</td>

     <td>https://www.857vps.cn/</td>

     <td> HTML</td>

   </tr>

    <tr>

     <td>C语言</td>

     <td>http://www.baidu.com/</td>

     <td>搜索</td>

     </tr>

   <tr>

      <td>当当</td>

     <td>http://www.dangdang.com/</td>

      <td>图书</td>

    </tr>

</table>




效果图



3.5、表格标签,屏幕截图 2022-11-20 222430.png,html,css,标签,第3张



往后讲,作为一个表格,必须要有的就是标题吧,不然别人怎么会知道你写的这个标题的内容是什么呢·所以我们要加上标题标签。

标题标签我们之前也已经讲过就是 <caption>标签


<!DOCTYPE html>

<table border="1" style="border-collapse: collapse;">

<caption>这是表格的标题</caption>      这个就是我们要加的代码

   <tr>

     <th>名称</th>

     <th>官网</th>

     <th>性质</th>

   </tr>

   <tr>

     <td>VPS857</td>

     <td>https://www.857vps.cn/</td>

     <td> HTML</td>

   </tr>

    <tr>

     <td>C语言</td>

     <td>http://www.baidu.com/</td>

     <td>搜索</td>

     </tr>

   <tr>

      <td>当当</td>

     <td>http://www.dangdang.com/</td>

      <td>图书</td>

    </tr>

</table>


效果图


3.5、表格标签,屏幕截图 2022-11-20 222810.png,html,css,标签,第4张


今天就先讲到这里,现在是北京时间的22:30世界杯开幕式即将开始我先去看开幕式啦。后面我会讲合并单元格等一系列的内容


文章版权声明:除非注明,否则均为VPS857原创文章,转载或复制请以超链接形式并注明出处。

发表评论

快捷回复:表情:
评论列表 (暂无评论,233人围观)

还没有评论,来说两句吧...

目录[+]

取消
微信二维码
微信二维码
支付宝二维码