当前位置：文江博客话题详情

HTML CSS 表格背景

发布于 2024-08-10 22:43:53 字数 241 浏览 7 评论 0原文

我有一个以表格形式呈现的表格。在第三列中，有 4 行用于选择首选联系方式（单选按钮）。我目前正在使用标签在第一行写入此文本。然而，我被告知，它看起来不如使用自定义图像那么好。

该图像应该很好地位于表单内容之间，并带有指向这些单选按钮的箭头。我认为最简单的方法是在列上设置固定宽度，然后将表格的背景图像设置为我给出的图像，并将其定位（带有背景位置）到它应该位于的位置。设置好列宽后，就不会有对齐问题了。

关于如何做到这一点还有其他想法吗？

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

夜血缘 2024-08-17 22:43:53

我的建议：不要将背景放在表格上，而是将背景放在 rowspan=3 的表格单元格上，这意味着它将覆盖所有三个单选按钮右侧的区域。下面是一个说明该技术的 HTML 示例。请注意，您需要仔细调整每列（以及随附的表格）的大小，以确保您的图像正确适合。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">
table.contactForm
{
    background-color:#EBF3F7;
    width:681px;
} 
table.contactForm td
{
    text-align:left;
    padding-top:5px;
    padding-bottom:5px;
    padding-left:0px;
    padding-right:0px;
    white-space:nowrap;
    height:25px;
}
table.contactForm td.first
{
    width:200px;                
}
table.contactForm label
{
    padding-left:5px;
}
table.contactForm td.second
{
    width:200px;
    text-align:right;
}
table.contactForm td input[type=text]
{
    width:180px;                
}
table.contactForm td.third
{
    width:20px; 
    text-align:right;
}
table.contactForm td.imageArrows
{
    background-image:url(background.jpg);
    background-repeat:no-repeat;
    background-position:left center;
    width:261px;
    height:78px;
    padding:0px;
}

</style>
</head>

<body>
<table class="contactForm">
<tr>
<td class="first"><label for="FullName">Full Name</label></td>
<td class="second"><input type="text" name="FullName" /></td>
<td></td>
</tr>
<tr><td colspan="4"><br/></td></tr>
<tr>
<td class="first"><label for="Phone">Phone</label></td>
<td class="second"><input type="text" name="Phone" /></td>
<td class="third"><input type="radio" name="Preferred" /></td>
<td rowspan="3" class="imageArrows"></td>
</tr>
<tr>
<td class="first"><label for="Mobile">Mobile</label></td>
<td class="second"><input type="text" name="Mobile" /></td>
<td class="third"><input type="radio" name="Preferred" /></td>
</tr>
<tr>
<td class="first"><label for="Email">Email</label></td>
<td class="second"><input type="text" name="Email" /></td>
<td class="third"><input type="radio" name="Preferred" /></td>
</tr>

</table>
</body>
</html>

My suggestion: instead of putting the background on the table, put the background on a table cell with rowspan=3, meaning it will cover the area to the right of all three radio buttons. Here's an HTML sample illustrating the technique. Note that you'll need to carefully size each column (and the enclosing table) to make sure your image fits in properly.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">
table.contactForm
{
    background-color:#EBF3F7;
    width:681px;
} 
table.contactForm td
{
    text-align:left;
    padding-top:5px;
    padding-bottom:5px;
    padding-left:0px;
    padding-right:0px;
    white-space:nowrap;
    height:25px;
}
table.contactForm td.first
{
    width:200px;                
}
table.contactForm label
{
    padding-left:5px;
}
table.contactForm td.second
{
    width:200px;
    text-align:right;
}
table.contactForm td input[type=text]
{
    width:180px;                
}
table.contactForm td.third
{
    width:20px; 
    text-align:right;
}
table.contactForm td.imageArrows
{
    background-image:url(background.jpg);
    background-repeat:no-repeat;
    background-position:left center;
    width:261px;
    height:78px;
    padding:0px;
}

</style>
</head>

<body>
<table class="contactForm">
<tr>
<td class="first"><label for="FullName">Full Name</label></td>
<td class="second"><input type="text" name="FullName" /></td>
<td></td>
</tr>
<tr><td colspan="4"><br/></td></tr>
<tr>
<td class="first"><label for="Phone">Phone</label></td>
<td class="second"><input type="text" name="Phone" /></td>
<td class="third"><input type="radio" name="Preferred" /></td>
<td rowspan="3" class="imageArrows"></td>
</tr>
<tr>
<td class="first"><label for="Mobile">Mobile</label></td>
<td class="second"><input type="text" name="Mobile" /></td>
<td class="third"><input type="radio" name="Preferred" /></td>
</tr>
<tr>
<td class="first"><label for="Email">Email</label></td>
<td class="second"><input type="text" name="Email" /></td>
<td class="third"><input type="radio" name="Preferred" /></td>
</tr>

</table>
</body>
</html>

回复收藏 0 原文

~没有更多了~