Question

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>

我正试图获得最重要的标题，即周日周一等。

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

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

Answer 1

使用CSS隐藏边框：

＆＃13;

table {
  border-collapse: collapse;
}

td {
  border: thin solid;
}

.noBorder td {
  border: none;
}

＆＃13;

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

＆＃13;

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

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

2 个答案: