如何创建这样的 HTML 列标题？答案

【问题标题】：How can I create HTML column headings like this?如何创建这样的 HTML 列标题？
【发布时间】：2017-12-11 03:03:23
【问题描述】：

我要创建的 HTML 表格

我唯一的问题是如何获得周一周二等的列标题？

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<style type="text/css">

td { 
	height: 100px;
	width: 100px;
}
</style>
</head>
<body>
	<center>
<table border="1" cellspacing="0" >
	<caption style="text-align:right;" align="bottom" >Printable Calender January 2017 available from www.getmeacalender.com</captio>
	<tbody>
	<tr>
		<td colspan="4" align="center"  valign="middle"  style="font-weight:bold; font-size:70pt; ">January</td>
		<td></td>
		<td></td>
		<td></td>
	</tr>
	<tr>
		<td align="left" valign="top">1</td>
		<td align="left" valign="top">2</td>
		<td align="left" valign="top">3</td>
		<td align="left" valign="top">4</td>
		<td align="left" valign="top">5</td>
		<td align="left" valign="top">6</td>
		<td align="left" valign="top">7</td>		

	</tr>
		<tr>
		<td align="left" valign="top">8</td>
		<td align="left" valign="top">9</td>
		<td align="left" valign="top">10</td>
		<td align="left" valign="top">11</td>
		<td align="left" valign="top">12</td>
		<td align="left" valign="top">13</td>
		<td align="left" valign="top">14</td>		

	</tr>
		<tr>
		<td align="left" valign="top">15</td>
		<td align="left" valign="top">16</td>
		<td align="left" valign="top">17</td>
		<td align="left" valign="top">18</td>
		<td align="left" valign="top">19</td>
		<td align="left" valign="top">20</td>
		<td align="left" valign="top">21</td>		

	</tr>
		<tr>
		<td align="left" valign="top">22</td>
		<td align="left" valign="top">23</td>
		<td align="left" valign="top">24</td>
		<td align="left" valign="top">25</td>
		<td align="left" valign="top">26</td>
		<td align="left" valign="top">27</td>
		<td align="left" valign="top">28</td>
				

	</tr>
		<tr>
	    <td align="left" valign="top">29</td>
		<td align="left" valign="top">30</td>
		<td align="left" valign="top">31</td>
		<td align="left" valign="top" colspan="4">Notes:</td>		

	</tr>
</tbody>
</table>
</caption>
</body>
</html>

我正在尝试获取最上面的标题，即周日周一等。

我无法将它们直接添加到我的表格中，因为它们周围没有边框。

那么我该如何解决这个问题呢？

【问题讨论】：

提供您尝试过的代码。
我可以，但网站不让我
第一个问题：你的问题看起来很像家庭作业第二个问题：只需将问题的代码部分缩进四个空格，以便下次在代码框中显示。
我添加了我的代码。

标签： html html-table

【解决方案1】：

使用 CSS 隐藏边框：

table {
  border-collapse: collapse;
}

td {
  border: thin solid;
}

.noBorder td {
  border: none;
}

<table>
  <tr class="noBorder">
    <td>Monday</td>
    <td>Tuesday</td>
    <td>Wednesday</td>
  </tr>
  <tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>
  </tr>
</table>

【讨论】：

【解决方案2】：

编辑：抱歉，刚刚看到图片，这段代码就可以了

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <style type="text/css">

td { 
    height: 100px;
    width: 100px;
    border: 1px solid black;
}

.header td {
    height: 20px;
    border: none;
}

table {
    border: none;
}
</style>
</head>
<body>
    <center>
<table border="1" cellspacing="0" >
    <caption style="text-align:right;" align="bottom" >Printable Calender January 2017 available from www.getmeacalender.com</captio>
    <tbody>
    <tr class="header">
        <td align="left" valign="top">Sun</td>
        <td align="left" valign="top">Mon</td>
        <td align="left" valign="top">Tue</td>
        <td align="left" valign="top">Wed</td>
        <td align="left" valign="top">Thu</td>
        <td align="left" valign="top">Fri</td>
        <td align="left" valign="top">Sat</td>        

    </tr>
    <tr>
        <td colspan="4" align="center"  valign="middle"  style="font-weight:bold; font-size:70pt; ">January</td>
        <td></td>
        <td></td>
        <td></td>
    </tr>
    <tr>
        <td align="left" valign="top">1</td>
        <td align="left" valign="top">2</td>
        <td align="left" valign="top">3</td>
        <td align="left" valign="top">4</td>
        <td align="left" valign="top">5</td>
        <td align="left" valign="top">6</td>
        <td align="left" valign="top">7</td>        

    </tr>
        <tr>
        <td align="left" valign="top">8</td>
        <td align="left" valign="top">9</td>
        <td align="left" valign="top">10</td>
        <td align="left" valign="top">11</td>
        <td align="left" valign="top">12</td>
        <td align="left" valign="top">13</td>
        <td align="left" valign="top">14</td>       

    </tr>
        <tr>
        <td align="left" valign="top">15</td>
        <td align="left" valign="top">16</td>
        <td align="left" valign="top">17</td>
        <td align="left" valign="top">18</td>
        <td align="left" valign="top">19</td>
        <td align="left" valign="top">20</td>
        <td align="left" valign="top">21</td>       

    </tr>
        <tr>
        <td align="left" valign="top">22</td>
        <td align="left" valign="top">23</td>
        <td align="left" valign="top">24</td>
        <td align="left" valign="top">25</td>
        <td align="left" valign="top">26</td>
        <td align="left" valign="top">27</td>
        <td align="left" valign="top">28</td>


    </tr>
        <tr>
        <td align="left" valign="top">29</td>
        <td align="left" valign="top">30</td>
        <td align="left" valign="top">31</td>
        <td align="left" valign="top" colspan="4">Notes:</td>       

    </tr>
</tbody>
</table>
</caption>
</body>
</html>

【讨论】：