Question

我有一个HTML表格，我想在中间的两个列之间添加一个空格，就像将表格吐成两半一样。在第4和第5列之间。我可以在中间放置另一列，然后关闭该列的顶部和底部边框吗？

我该怎么做？ Fiddle

<!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>

Answer 1

选中此项，您可以使用包含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>

在表中的两列之间添加空格

1 个答案: