Table的一些问题

最新推荐文章于 2022-03-02 11:27:28 发布

爱笑的人啊

最新推荐文章于 2022-03-02 11:27:28 发布

阅读量537

点赞数 1

分类专栏： JavaScript 个人总结文章标签：布局标签

本文链接：https://blog.csdn.net/Demo_18/article/details/78279465

版权

JavaScript 同时被 2 个专栏收录

12 篇文章 0 订阅

订阅专栏

个人总结

7 篇文章 1 订阅

订阅专栏

关于table表格的一些问题

前几天同学突然问到了关于table表格的边框的一些问题，我没想到的是这个关于他这个问题却把我困惑住了。所以我通过各种实验然后查询算是对table这个东西有了一些新的认识。

问题1 border

我们都知道table标签对于表格的一级一些规范化的样式提供很多方便，而且table布局出来的东西给人的感觉很整齐。
但是对于我们经常使用的表格我们也许会忽略一些问题。

首先是table的边框border问题。
如果我们想给一个table 表格设置边框我们也许会利用行内样式直接，如下

<table width="200px" height="100px;">
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
        </tr>
        <tr>
            <td>4</td>
            <td>5</td>
            <td>6</td>
        </tr>
    </table>

这样将会产生一个宽200高100的表格，但是没有边框。
如下：
这里写图片描述
如果我们想要边框，也许我们会直接在行内样式书写，如：

<table width="200px" height="100px"; border="1">

产生的效果如下：
这里写图片描述

关键到了首先这是让我迷惑的第一点：
对于我们如果只想要貌似不是双边框的表格我会这样写

<table width="200px" height="100px"; border="1" cellspacing="0">

效果如下：
这里写图片描述
（切记：cellspacing 是代表单元格与单元格之间的空白）
如果我们想要单元格的填充变大，我们会这样写如下：

<table width="200px" height="100px"; border="1" cellspacing="0" cellpadding="20">

效果图如下：
这里写图片描述
（切记：cellpadding这是单元格内部的空白）
然后我由于装的一下和人家说，样式还是写在外面好，但是产生的效果却让我意外了。

如：用css样式内部样式写

table{
            border: 1px solid #ff0;
            width: 200px;
            height: 100px;
        }

我想的是这样的，如下：
这里写图片描述

但是结果却是，如下：
这里写图片描述

结果初开始真的很差强人意，当时我也是糊涂了，后来经过反复测试我才知道，如过想要表格里面的td也有边框，原来需要这样写：

table,td{
            border: 1px solid #ff0;
            width: 200px;
            height: 100px;
        }

（切记：不在行内样式写时，一定要注意，table只是表格的外边框，如果想要内边框要加上td,行内样式书写相当于给table tr td 都加上了边框）
现想到如果只给td会产生如下的效果：
这里写图片描述
补充：用css写时
行内样式cellspacing 相当于css中的 border-collapse: collapse;
行内样式cellpadding 相当于css中的padding

问题2 align valign

居中表格居中我们在行内样式一般会用到align，如下：

<table align="center" border="1" width="200px" height="100px">

同样我们让表格上左或右表格也能乖乖的听话，但是对于垂直居中可能表格就有些淘气了。
例如：

<table align="center" border="1" width="200px" height="100px"  valign="bottom">

对于表格完全没有效果，后来经过多次实验我才知道，valign的top,bottom,middle是相对于表格的tr,td 而言的，并且表格的td也就是说表格要有固定的高度才行，如下代码：

<table align="center" border="1" width="200px" height="300px"  >
        <tr valign="bottom">
            <td>1</td>
            <td>2</td>
            <td>3</td>
        </tr>
        <tr valign="top">
            <td>1</td>
            <td>2</td>
            <td>3</td>
        </tr>
        <tr valign="middle">
            <td>1</td>
            <td>2</td>
            <td>3</td>
        </tr>
        <tr>
            <td valign="top">4</td>
            <td valign="middle">5</td>
            <td valign="bottom">6</td>
        </tr>
    </table>

效果如下：
这里写图片描述

问题3 rowspan colspan

colspan 是合并列
代码如下：

<table align="center" border="1" width="200px" height="100px" >
        <tr > 
            <td colspan="2">1</td>
            <td>2</td>
        </tr>
        <tr>
            <td>4</td>
            <td>5</td>
            <td>6</td>
        </tr>
        <tr>
            <td>7</td>
            <td>8</td>
            <td>9</td>
        </tr>
    </table>

效果如下：
这里写图片描述
rowspan 是合并列，代码如下：

<tr > 
            <td colspan="2">1</td>
            <td>2</td>
        </tr>
        <tr >
            <td rowspan="2">4</td>
            <td>5</td>
            <td>6</td>
        </tr>
        <tr>
            <td>7</td>
            <td>8</td>

        </tr>

效果如下：
这里写图片描述

总结

行内样式border ="1"是相当于给table , tr ,td 都给了一个1像素的边框
行内样式cellspacing 相当于css中的 border-collapse: collapse;
行内样式cellpadding 相当于css中的padding
gn对table有用但valign对table无用，但对tr,td有用，前提是td要有固定的高度，高度不够也不行。
colspan 是合并列 rowspan 是合并行