我有一个 HTML 表格，我想在中间的两列之间添加一个空格，就像将表格分成两半一样。在第 4 列和第 5 列之间。我可以在中间放置另一列，然后关闭该列的上下边框吗？
我怎样才能做到这一点？小提琴
<!DOCTYPE html>
<html lang="en">
<head>
<style>
h1 {
background-color: orange;
font-family: "Times New Roman", Times, serif;
font-size: 40px;
}
p {
background-color: rgb(255,0,0);
}
/*** CODE HAS BEEN CHANGED HERE ***/
td.image {
text-align: center;
}
table, th, td {
border-bottom: 1px solid black;
border-left: none;
border-right: 1px solid black;
border-top: none;
border-collapse: collapse;
}
</style>
</head>
<body>
<table>
<col width="120">
<col width="60">
<col width="100">
<col width="300">
<col width="120">
<col width="60">
<col width="100">
<col width="300">
<tr>
<td style="text-align:right; padding-right: 8px;">Friday <br>clear <br>88 ˚F<br><td class="image"><img src="http://icons.wxug.com/i/c/k/clear.gif" alt="W3Schools.com"</img></td>
<td style="padding-left: 8px;"> Prep: 10 % <br> Rain: 0.00 in <br> Snow: 0.00 in <br></td>
<td style="vertical-align:top; padding-left: 8px;">A few clouds. Lows overnight in the mid 60s. <br></td> <td style="text-align:right; padding-right: 8px;">Friday Night <br>nt_clear <br>66 ˚F<br><td class="image"><img src="http://icons.wxug.com/i/c/k/nt_clear.gif" alt="W3Schools.com"</img></td>
<td style="padding-left: 8px;"> Prep: 10 % <br> Rain: 0.00 in <br> Snow: 0.00 in <br></td>
<td style="vertical-align:top; padding-left: 8px;">Mainly clear. Low 66F. Winds light and variable. <br></td> </tr>
<tr>
<td style="text-align:right; padding-right: 8px;">Saturday <br>clear <br>90 ˚F<br><td class="image"><img src="http://icons.wxug.com/i/c/k/clear.gif" alt="W3Schools.com"</img></td>
<td style="padding-left: 8px;"> Prep: 10 % <br> Rain: 0.00 in <br> Snow: 0.00 in <br></td>
<td style="vertical-align:top; padding-left: 8px;">Abundant sunshine. High near 90F. Winds SSW at 5 to 10 mph. <br></td> <td style="text-align:right; padding-right: 8px;">Saturday Night <br>nt_tstorms <br>67 ˚F<br><td class="image"><img src="http://icons.wxug.com/i/c/k/nt_tstorms.gif" alt="W3Schools.com"</img></td>
<td style="padding-left: 8px;"> Prep: 80 % <br> Rain: 0.24 in <br> Snow: 0.00 in <br></td>
<td style="vertical-align:top; padding-left: 8px;">Scattered thunderstorms in the evening, then mainly cloudy overnight with thunderstorms likely. Low 67F. Winds S at 5 to 10 mph. Chance of rain 80%. <br></td> </tr>
<tr>
<td style="text-align:right; padding-right: 8px;">Sunday <br>tstorms <br>76 ˚F<br><td class="image"><img src="http://icons.wxug.com/i/c/k/tstorms.gif" alt="W3Schools.com"</img></td>
<td style="padding-left: 8px;"> Prep: 90 % <br> Rain: 0.52 in <br> Snow: 0.00 in <br></td>
<td style="vertical-align:top; padding-left: 8px;">Thunderstorms likely. High 76F. Winds S at 5 to 10 mph. Chance of rain 90%. <br></td> <td style="text-align:right; padding-right: 8px;">Sunday Night <br>nt_tstorms <br>66 ˚F<br><td class="image"><img src="http://icons.wxug.com/i/c/k/nt_tstorms.gif" alt="W3Schools.com"</img></td>
<td style="padding-left: 8px;"> Prep: 100 % <br> Rain: 0.85 in <br> Snow: 0.00 in <br></td>
<td style="vertical-align:top; padding-left: 8px;">Thunderstorms likely. Low 66F. Winds SSW at 5 to 10 mph. Chance of rain 100%. <br></td> </tr>
<tr>
<td style="text-align:right; padding-right: 8px;">Monday <br>tstorms <br>79 ˚F<br><td class="image"><img src="http://icons.wxug.com/i/c/k/tstorms.gif" alt="W3Schools.com"</img></td>
<td style="padding-left: 8px;"> Prep: 80 % <br> Rain: 0.16 in <br> Snow: 0.00 in <br></td>
<td style="vertical-align:top; padding-left: 8px;">Thunderstorms likely. High 79F. Winds NW at 5 to 10 mph. Chance of rain 80%. <br></td> <td style="text-align:right; padding-right: 8px;">Monday Night <br>nt_chancetstorms <br>60 ˚F<br><td class="image"><img src="http://icons.wxug.com/i/c/k/nt_chancetstorms.gif" alt="W3Schools.com"</img></td>
<td style="padding-left: 8px;"> Prep: 50 % <br> Rain: 0.01 in <br> Snow: 0.00 in <br></td>
<td style="vertical-align:top; padding-left: 8px;">Scattered thunderstorms in the evening. Cloudy skies overnight. Low around 60F. Winds light and variable. Chance of rain 50%. <br></td> </tr>
</table>
</html>
</body>
检查这个，你可以使用表数据 rowspan
h1 {
background-color: orange;
font-family: "Times New Roman", Times, serif;
font-size: 40px;
}
p {
background-color: rgb(255,0,0);
}
/*** CODE HAS BEEN CHANGED HERE ***/
td.image {
text-align: center;
}
table, th, td {
border-bottom: 1px solid black;
border-left: none;
border-right: 1px solid black;
border-top: none;
border-collapse: collapse;
}<table>
<col width="120">
<col width="60">
<col width="100">
<col width="300">
<col width="120">
<col width="60">
<col width="100">
<col width="300">
<tr>
<td style="text-align:right; padding-right: 8px;">Friday <br>clear <br>88 ˚F<br>
<td class="image"><img src="http://icons.wxug.com/i/c/k/clear.gif" alt="W3Schools.com"></td>
<td style="padding-left: 8px;"> Prep: 10 % <br> Rain: 0.00 in <br> Snow: 0.00 in <br></td>
<td style="vertical-align:top; padding-left: 8px;">A few clouds. Lows overnight in the mid 60s. <br></td>
<td style="padding: 10px;" rowspan="10"></td>
<td style="text-align:right; padding-right: 8px;">Friday Night <br>nt_clear <br>66 ˚F<br>
<td class="image"><img src="http://icons.wxug.com/i/c/k/nt_clear.gif" alt="W3Schools.com"></td>
<td style="padding-left: 8px;"> Prep: 10 % <br> Rain: 0.00 in <br> Snow: 0.00 in <br></td>
<td style="vertical-align:top; padding-left: 8px;">Mainly clear. Low 66F. Winds light and variable. <br></td> </tr>
<tr>
<td style="text-align:right; padding-right: 8px;">Saturday <br>clear <br>90 ˚F<br><td class="image"><img src="http://icons.wxug.com/i/c/k/clear.gif" alt="W3Schools.com"></td>
<td style="padding-left: 8px;"> Prep: 10 % <br> Rain: 0.00 in <br> Snow: 0.00 in <br></td>
<td style="vertical-align:top; padding-left: 8px;">Abundant sunshine. High near 90F. Winds SSW at 5 to 10 mph. <br></td>
<td style="text-align:right; padding-right: 8px;">Saturday Night <br>nt_tstorms <br>67 ˚F<br>
<td class="image"><img src="http://icons.wxug.com/i/c/k/nt_tstorms.gif" alt="W3Schools.com"></td>
<td style="padding-left: 8px;"> Prep: 80 % <br> Rain: 0.24 in <br> Snow: 0.00 in <br></td>
<td style="vertical-align:top; padding-left: 8px;">Scattered thunderstorms in the evening, then mainly cloudy overnight with thunderstorms likely. Low 67F. Winds S at 5 to 10 mph. Chance of rain 80%. <br></td> </tr>
<tr>
<td style="text-align:right; padding-right: 8px;">Sunday <br>tstorms <br>76 ˚F<br></td>
<td class="image"><img src="http://icons.wxug.com/i/c/k/tstorms.gif" alt="W3Schools.com"></td>
<td style="padding-left: 8px;"> Prep: 90 % <br> Rain: 0.52 in <br> Snow: 0.00 in <br></td>
<td style="vertical-align:top; padding-left: 8px;">Thunderstorms likely. High 76F. Winds S at 5 to 10 mph. Chance of rain 90%. <br></td>
<td style="text-align:right; padding-right: 8px;">Sunday Night <br>nt_tstorms <br>66 ˚F<br><td class="image"><img src="http://icons.wxug.com/i/c/k/nt_tstorms.gif" alt="W3Schools.com"></td>
<td style="padding-left: 8px;"> Prep: 100 % <br> Rain: 0.85 in <br> Snow: 0.00 in <br></td>
<td style="vertical-align:top; padding-left: 8px;">Thunderstorms likely. Low 66F. Winds SSW at 5 to 10 mph. Chance of rain 100%. <br></td> </tr>
<tr>
<td style="text-align:right; padding-right: 8px;">Monday <br>tstorms <br>79 ˚F<br><td class="image"><img src="http://icons.wxug.com/i/c/k/tstorms.gif" alt="W3Schools.com"></td>
<td style="padding-left: 8px;"> Prep: 80 % <br> Rain: 0.16 in <br> Snow: 0.00 in <br></td>
<td style="vertical-align:top; padding-left: 8px;">Thunderstorms likely. High 79F. Winds NW at 5 to 10 mph. Chance of rain 80%. <br></td> <td style="text-align:right; padding-right: 8px;">Monday Night <br>nt_chancetstorms <br>60 ˚F<br><td class="image"><img src="http://icons.wxug.com/i/c/k/nt_chancetstorms.gif" alt="W3Schools.com"></td>
<td style="padding-left: 8px;"> Prep: 50 % <br> Rain: 0.01 in <br> Snow: 0.00 in <br></td>
<td style="vertical-align:top; padding-left: 8px;">Scattered thunderstorms in the evening. Cloudy skies overnight. Low around 60F. Winds light and variable. Chance of rain 50%. <br></td> </tr>
<tr>
<td style="text-align:right; padding-right: 8px;">Tuesday <br>tstorms <br>71 ˚F<br><td class="image"><img src="http://icons.wxug.com/i/c/k/tstorms.gif" alt="W3Schools.com"></td>
<td style="padding-left: 8px;"> Prep: 80 % <br> Rain: 0.44 in <br> Snow: 0.00 in <br></td>
<td style="vertical-align:top; padding-left: 8px;">Thunderstorms. High 71F. Winds ESE at 5 to 10 mph. Chance of rain 80%. <br></td> <td style="text-align:right; padding-right: 8px;">Tuesday Night <br>nt_chancerain <br>59 ˚F<br><td class="image"><img src="http://icons.wxug.com/i/c/k/nt_chancerain.gif" alt="W3Schools.com"></td>
<td style="padding-left: 8px;"> Prep: 70 % <br> Rain: 0.22 in <br> Snow: 0.00 in <br></td>
<td style="vertical-align:top; padding-left: 8px;">Rain showers early with mostly cloudy conditions late. Thunder possible. Low 59F. Winds SSW at 5 to 10 mph. Chance of rain 70%. <br></td> </tr>
<tr>
<td style="text-align:right; padding-right: 8px;">Wednesday <br>chancetstorms <br>76 ˚F<br><td class="image"><img src="http://icons.wxug.com/i/c/k/chancetstorms.gif" alt="W3Schools.com"></td>
<td style="padding-left: 8px;"> Prep: 60 % <br> Rain: 0.18 in <br> Snow: 0.00 in <br></td>
<td style="vertical-align:top; padding-left: 8px;">Partly cloudy with afternoon showers or thunderstorms. High 76F. Winds SW at 10 to 15 mph. Chance of rain 60%. <br></td> <td style="text-align:right; padding-right: 8px;">Wednesday Night <br>nt_chancetstorms <br>53 ˚F<br><td class="image"><img src="http://icons.wxug.com/i/c/k/nt_chancetstorms.gif" alt="W3Schools.com"></td>
<td style="padding-left: 8px;"> Prep: 60 % <br> Rain: 0.14 in <br> Snow: 0.00 in <br></td>
<td style="vertical-align:top; padding-left: 8px;">Partly to mostly cloudy skies with scattered thunderstorms before midnight. Low 53F. Winds W at 10 to 15 mph. Chance of rain 60%. <br></td> </tr>
<tr>
<td style="text-align:right; padding-right: 8px;">Thursday <br>partlycloudy <br>72 ˚F<br><td class="image"><img src="http://icons.wxug.com/i/c/k/partlycloudy.gif" alt="W3Schools.com"></td>
<td style="padding-left: 8px;"> Prep: 20 % <br> Rain: 0.00 in <br> Snow: 0.00 in <br></td>
<td style="vertical-align:top; padding-left: 8px;">Intervals of clouds and sunshine. High 72F. Winds WSW at 10 to 15 mph. <br></td> <td style="text-align:right; padding-right: 8px;">Thursday Night <br>nt_partlycloudy <br>53 ˚F<br><td class="image"><img src="http://icons.wxug.com/i/c/k/nt_partlycloudy.gif" alt="W3Schools.com"></td>
<td style="padding-left: 8px;"> Prep: 10 % <br> Rain: 0.00 in <br> Snow: 0.00 in <br></td>
<td style="vertical-align:top; padding-left: 8px;">Some clouds early will give way to generally clear conditions overnight. Low 53F. Winds WSW at 5 to 10 mph. <br></td> </tr>
<tr>
<td style="text-align:right; padding-right: 8px;">Friday <br>clear <br>79 ˚F<br><td class="image"><img src="http://icons.wxug.com/i/c/k/clear.gif" alt="W3Schools.com"></td>
<td style="padding-left: 8px;"> Prep: 10 % <br> Rain: 0.00 in <br> Snow: 0.00 in <br></td>
<td style="vertical-align:top; padding-left: 8px;">Sunny. High 79F. Winds SW at 5 to 10 mph. <br></td> <td style="text-align:right; padding-right: 8px;">Friday Night <br>nt_clear <br>59 ˚F<br><td class="image"><img src="http://icons.wxug.com/i/c/k/nt_clear.gif" alt="W3Schools.com"></td>
<td style="padding-left: 8px;"> Prep: 10 % <br> Rain: 0.00 in <br> Snow: 0.00 in <br></td>
<td style="vertical-align:top; padding-left: 8px;">A mostly clear sky. Low 59F. Winds SW at 5 to 10 mph. <br></td> </tr>
<tr>
<td style="text-align:right; padding-right: 8px;">Saturday <br>clear <br>84 ˚F<br><td class="image"><img src="http://icons.wxug.com/i/c/k/clear.gif" alt="W3Schools.com"></td>
<td style="padding-left: 8px;"> Prep: 10 % <br> Rain: 0.00 in <br> Snow: 0.00 in <br></td>
<td style="vertical-align:top; padding-left: 8px;">Sunny. High 84F. Winds SW at 5 to 10 mph. <br></td> <td style="text-align:right; padding-right: 8px;">Saturday Night <br>nt_chancerain <br>64 ˚F<br><td class="image"><img src="http://icons.wxug.com/i/c/k/nt_chancerain.gif" alt="W3Schools.com"></td>
<td style="padding-left: 8px;"> Prep: 40 % <br> Rain: 0.05 in <br> Snow: 0.00 in <br></td>
<td style="vertical-align:top; padding-left: 8px;">Cloudy with showers. Low 64F. Winds SW at 5 to 10 mph. Chance of rain 40%. <br></td> </tr>
<tr>
<td style="text-align:right; padding-right: 8px;">Sunday <br>chancetstorms <br>85 ˚F<br><td class="image"><img src="http://icons.wxug.com/i/c/k/chancetstorms.gif" alt="W3Schools.com"></td>
<td style="padding-left: 8px;"> Prep: 30 % <br> Rain: 0.03 in <br> Snow: 0.00 in <br></td>
<td style="vertical-align:top; padding-left: 8px;">Scattered clouds with the possibility of an isolated thunderstorm developing during the afternoon. High near 85F. Winds SW at 5 to 10 mph. Chance of rain 30%. <br></td> <td style="text-align:right; padding-right: 8px;">Sunday Night <br>nt_partlycloudy <br>64 ˚F<br><td class="image"><img src="http://icons.wxug.com/i/c/k/nt_partlycloudy.gif" alt="W3Schools.com"></td>
<td style="padding-left: 8px;"> Prep: 20 % <br> Rain: 0.00 in <br> Snow: 0.00 in <br></td>
<td style="vertical-align:top; padding-left: 8px;">Partly cloudy skies. Low 64F. Winds SW at 5 to 10 mph. <br></td> </tr>
</table>本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句