Fatal编程技术网
  • html/
  • Html 特定的表对齐问题

Html 特定的表对齐问题

html css

Html 特定的表对齐问题,html,css,html-table,Html,Css,Html Table,以下是我的代码的通用版本： <!doctype html> <html> <head> <meta charset="utf-8"> <title>Untitled Document</title> </head> <body style="font-size: 36px"> </body> </html> <html> <head> <meta

以下是我的代码的通用版本：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
</head>

<body style="font-size: 36px">
</body>
</html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body style="min-width:100%" bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">

                <div align="center">
<table align="center" width="720" height="3653" border="1" cellpadding="0" cellspacing="0">
    <tr>
        <td width="720" valign="top" colspan="14">

                <img src="" width="720" height="207" border="0" style="display:block" alt=""></td>
    </tr>
    <tr>
        <td width="720" valign="top" colspan="14">

                <img src="" width="720" height="373" border="0" style="display:block" alt=""></td>
    </tr>
    <tr>
        <td width="720" height="152" valign="top" colspan="14" style="background-color:black">
            <span style="font-family:arial,helvetica,sans-serif; font-size:36pt;"><br><center>
              <p style="color:white"><strong>Statement<br> 
                </strong></p></span> 
            <span style="font-family:arial,helvetica,sans-serif; font-size:30pt;">  
              <p style="color:white">Statement</p>
<span style="font-family:arial,helvetica,sans-serif; font-size:30pt;">  
            <h5 style="color:white">Statement</h5>
            <span style="font-family:arial,helvetica,sans-serif; font-size:24pt;">  
              <p style="color:white">Statement</p>
      </center></span></td></p>
    </tr>

    <tr>
        <td width="720" height="547" valign="top" colspan="14" style="padding-right:55px; padding-left:55px;">
            <p align="center"><span style="font-family:arial,helvetica,sans-serif; font-size:35pt;"><strong>Statement<br></strong></span><br><br><span style="font-family:arial,helvetica,sans-serif; font-size:22pt;">Statement<br></span></p><p align="center">Site</p>
            <tr>
                    <td width="720" height="34" valign="top" colspan="14" style="padding-right:55px; padding-left:55px;">
            <span style="font-family:arial,helvetica,sans-serif; font-size:20pt;"><center><b><p>Statement</p>

<tr>
        <td width="720" height="34" valign="top" colspan="14" style="padding-right:55px; padding-left:55px;">
            <span style="font-family:arial,helvetica,sans-serif; font-size:20pt;"><center><b><p>Statement</p>


    </tr>
<br> 
<tr>
        <td width="720" height="34" valign="top" colspan="14" style="padding-right:55px; padding-left:55px;">
            <span style="font-family:arial,helvetica,sans-serif; font-size:20pt;"><center><b><p>Site </p>
              <span style="font-family:arial,helvetica,sans-serif; font-size:20pt;"><center><b><p>Statement</p>
            <hr width="60%"></b></center></span></td>
    </tr>
                </strong></p></span>

    </tr>
<tr>
        <td width="720" height="34" valign="top" colspan="14" style="padding-right:55px; padding-left:55px;">
            <span style="font-family:arial,helvetica,sans-serif; font-size:20pt;"><center><b><p>Date</p>

    <tr>
        <td width="720" height="34" valign="top" colspan="14" style="padding-right:55px; padding-left:55px;">
            <span style="font-family:arial,helvetica,sans-serif; font-size:26pt;"><center><b><p>Statement</p>

            <hr width="60%"></b></center></span></td>
    </tr>
    <tr>
        <td width="720" height="34" valign="top" colspan="14" style="padding-right:55px; padding-left:55px;">
            <span style="font-family:arial,helvetica,sans-serif; font-size:20pt;"><center><b><p>Date</p>

    <tr>
        <td width="720" height="34" valign="top" colspan="14" style="padding-right:55px; padding-left:55px;">
            <span style="font-family:arial,helvetica,sans-serif; font-size:26pt;"><center><b><p>Statement</p>

            <hr width="60%"></b></center></span></td>
    </tr>
     <tr>
        <td width="720" height="34" valign="top" colspan="14" style="padding-right:55px; padding-left:55px;">
            <span style="font-family:arial,helvetica,sans-serif; font-size:20pt;"><center><b><p>Statement</p>

    <tr>
        <td width="720" height="34" valign="top" colspan="14" style="padding-right:55px; padding-left:55px;">
            <span style="font-family:arial,helvetica,sans-serif; font-size:26pt;"><center><b><p>Statement
</p>

            <hr width="60%"></b></center></span></td>
    </tr>
     <tr>
        <td width="720" height="34" valign="top" colspan="14" style="padding-right:55px; padding-left:55px;">
            <span style="font-family:arial,helvetica,sans-serif; font-size:20pt;"><center><b><p>Date</p>

    <tr>
        <td width="720" height="34" valign="top" colspan="14" style="padding-right:55px; padding-left:55px;">
            <span style="font-family:arial,helvetica,sans-serif; font-size:26pt;"><center><b><p>Statement
</p>

            <hr width="60%"></b></center></span></td>
    </tr>
        <tr>
        <td width="720" height="34" valign="top" colspan="14" style="padding-right:55px; padding-left:55px;">
            <span style="font-family:arial,helvetica,sans-serif; font-size:20pt;"><center><b><p>Statement
</p>
             <span style="font-family:arial,helvetica,sans-serif; font-size:14pt;"><center><b><p>Statement

</p>

            <hr width="60%"></b></center></span></td>
    </tr>
    <tr>
        <td width="720" valign="top" colspan="14">
            <a href="">
                <img src="" width="720" height="226" border="0" style="display:block" alt=""></a></td>
    </tr>
    <tr>
        <td width="15" valign="top" rowspan="3">
            <img src="" width="15" height="600" style="display:block" alt=""></td>
        <td width="160" valign="top" colspan="2" rowspan="3">
            <a href=""><img src="" width="160" height="600" style="display:block" alt=""></a></td>
        <td width="18" valign="top" colspan="2" rowspan="3">
            <img src="" width="18" height="600" style="display:block" alt=""></td>
        <td width="336" valign="top" colspan="5">
            <a href=""><img src="" width="336" height="280" style="display:block" alt=""></a></td>
        <td width="18" valign="top" rowspan="3">
            <img src="" width="18" height="600" style="display:block" alt=""></td>
        <td width="160" valign="top" colspan="2" rowspan="3">
            <a href=""><img src="" width="160" height="600" style="display:block" alt=""></a></td>
        <td width="13" valign="top" rowspan="3">
            <img src="" width="13" height="600" style="display:block" alt=""></td>
    </tr>
    <tr>
        <td width="336" valign="top" colspan="5">
            <img src="" width="336" height="40" style="display:block" alt=""></td>
    </tr>
    <tr>
        <td width="336" valign="top" colspan="5">
            <a href=""><img src="" width="336" height="280" style="display:block" alt=""></a></td>
    </tr>
    <tr>
        <td width="720" valign="top" colspan="14">
            <a href="">
                <img src="" width="720" height="176" border="0" style="display:block" alt=""></a></td>
    </tr>
    <tr>
        <td width="720" valign="top" colspan="14">
            <a href="">
                <img src="" width="720" height="375" border="0" style="display:block" alt=""></a></td>
    </tr>
    <tr>
        <td width="720" valign="top" colspan="14">
            <img src="" width="720" height="59" style="display:block" alt=""></td>
    </tr>
    <tr>
        <td width="720" valign="top" colspan="14">
            <a href="">
                <img src="" width="720" height="105" border="0" style="display:block" alt=""></a></td>
    </tr>
    <tr>
        <td width="720" valign="top" colspan="14">
            <a href="">
                <img src="" width="720" height="113" border="0" style="display:block" alt=""></a></td>
    </tr>
    <tr>
        <td width="720" valign="top" colspan="14">
            <a href="">
                <img src="" width="720" height="111" border="0" style="display:block" alt=""></a></td>
    </tr>
    <tr>
        <td width="720" valign="top" colspan="14">
            <a href="">
                <img src="" width="720" height="108" border="" style="display:block" alt=""></a></td>
    </tr>
    <tr>
        <td width="85" valign="top" colspan="2">
            <a href="">
                <img src="" width="85" height="131" border="1" style="display:block" alt=""></a></td>
        <td width="85" valign="top" colspan="2">
            <a href="">
                <img src="" width="85" height="131" border="1" style="display:block" alt=""></a></td>
        <td width="85" valign="top" colspan="2">
            <a href="">
                <img src="" width="85" height="131" border="1" style="display:block" alt=""></a></td>
        <td width="85" valign="top" colspan="2">
            <a href="">
                <img src="" width="85" height="131" border="1" style="display:block" alt=""></a></td>
        <td width="85" valign="top" colspan="2">
            <a href="">
                <img src="" width="85" height="131" border="1" style="display:block" alt=""></a></td>
        <td width="85" valign="top" colspan="2">
            <a href="">
                <img src="" width="85" height="131" border="1" style="display:block" alt=""></a></td>
        <td width="85" valign="top" colspan="2">
            <a href="">
                <img src="" width="85" height="131" border="1" style="display:block" alt=""></a></td>
        <td width="125" valign="top" colspan="0">
            <a href="">
                <img src="" width="125" height="131" border="0" style="display:block" alt=""></a></td>
    </tr>
    <tr>
        <td width="720" valign="top" colspan="14">
            <a href="">
                <img src="" width="720" height="63" border="0" style="display:block" alt=""></a></td>
    </tr>
    <tr>
        <td valign="top">
            <img src="" width="15" height="1" style="display:block" alt=""></td>
        <td valign="top">
            <img src="" width="75" height="1" style="display:block" alt=""></td>
        <td valign="top">
            <img src="" width="85" height="1" style="display:block" alt=""></td>
        <td valign="top">
            <img src="" width="5" height="1" style="display:block" alt=""></td>
        <td valign="top">
            <img src="" width="13" height="1" style="display:block" alt=""></td>
        <td valign="top">
            <img src="" width="77" height="1" style="display:block" alt=""></td>
        <td valign="top">
            <img src="" width="76" height="1" style="display:block" alt=""></td>
        <td valign="top">
            <img src="" width="76" height="1" style="display:block" alt=""></td>
        <td valign="top">
            <img src="" width="76" height="1" style="display:block" alt=""></td>
        <td valign="top">
            <img src="" width="31" height="1" style="display:block" alt=""></td>
        <td valign="top">
            <img src="" width="18" height="1" style="display:block" alt=""></td>
        <td valign="top">
            <img src="" width="32" height="1" style="display:block" alt=""></td>
        <td valign="top">
            <img src="" width="128" height="1" style="display:block" alt=""></td>
        <td valign="top">
            <img src="" width="13" height="1" style="display:block" alt=""></td>
    </tr>
</table>
</div></body>
</html>


无标题文件



语句



声明

陈述
声明




声明


声明
站点

声明

声明



场地

声明



日期

声明



声明



声明




声明




声明
在720的宽度范围内，我无法对齐所有内容。特别是第三行的黑框，上面有两个图像，底部有8个图标。我认为，由于第8个图标稍微宽一点，将其宽度设置为125，其他7到85将在所有图标上形成一个720的直线，但它们不匹配：

从下面的屏幕截图中可以看到，大于720的容器的所有内容都被移到左侧：

照片1

照片2

您不熟悉
CSS
？如果您通过一个单独的文件来编写样式，这个项目可能会简单得多。此外，也可能几乎不需要将所有内容都设置为表格样式。如果我正确理解您的问题，您可以使用标准的
元素。下面是我将在下面发布的代码的一部分结果

这是我的密码

.table{
边框：1px纯灰；
宽度：1080px；
身高：100%；
保证金：自动；
}
.box1{
边框：1px纯灰；
高度：300px；
宽度：720px；
保证金：自动；
}
.box2{
边框：1px纯灰；
高度：300px；
宽度：720px；
背景色：黑色；
显示器：flex；
对齐项目：居中；
证明内容：中心；
保证金：自动；
}
.box2p{
颜色：白色；
字体大小：30px；
}
.小桌子{
宽度：1080px；
高度：100px；
边框：1px纯灰；
文本对齐：居中；
保证金：自动；
}
.小盒子{
高度：100px；
宽度：85px；
边框：1px纯灰；
显示：内联块；
}
bigBox先生{
高度：100px；
宽度：125px；
边框：1px纯灰；
显示：内联块；
}


你不熟悉CSS吗？如果您通过一个单独的文件来编写样式，这个项目可能会简单得多。此外，也可能几乎不需要将所有内容都设置为表格样式。如果我正确理解您的问题，您可以使用标准的
元素。下面是我将在下面发布的代码的一部分结果

这是我的密码



.table{
边框：1px纯灰；
宽度：1080px；
身高：100%；
保证金：自动；
}
.box1{
边框：1px纯灰；
高度：300px；
宽度：720px；
保证金：自动；
}
.box2{
边框：1px纯灰；
高度：300px；
宽度：720px；
背景色：黑色；
显示器：flex；
对齐项目：居中；
证明内容：中心；
保证金：自动；
}
.box2p{
颜色：白色；
字体大小：30px；
}
.小桌子{
宽度：1080px；
高度：100px；
边框：1px纯灰；
文本对齐：居中；
保证金：自动；
}
.小盒子{
高度：100px；
宽度：85px；
边框：1px纯灰；
显示：内联块；
}
bigBox先生{
高度：100px；
宽度：125px；
边框：1px纯灰；
显示：内联块；
}




这是我最终做的（没有表格），但在你的截图中，我注意到图像与方框不对齐，图标没有完全包含在恒定宽度内（图像、方框、所有8个图标）。我没有考虑也没有调整方框之间的边框长度和填充。这些都是可配置的——只是想向您展示一种更好的设置代码和设置代码样式的方法。这是我最终做的（没有表格），但在您的屏幕截图中，我注意到图像与方框不对齐，图标也没有完全包含在恒定宽度内（图像、方框、所有8个图标）。我没有说明，也不调整框之间的边框长度和填充。这些也是可配置的——只是想向您展示一种更好的设置方式