How do I make a table for three months calender using html table
|
How do I make a table for three months calender using html table
Hi,
First try making a table for each month, in HTML 4.01 it is:
That is this month. If you want the months vertically displayed, it would do it automatically. To center it wrap the whole thing in a 'div' tag with 'align="center' inside the tag and close the tag at the end.Code:<table cellspacing="1" cellpadding="5" border="1" width="90%">
<thead>
<tr colspan="7">
<th>October</th></tr></thead>
<tbody>
<tr>
<td align="left" valign="top> </td>
<td align="left" valign="top> </td>
<td align="left" valign="top> </td>
<td align="left" valign="top> </td>
<td align="left" valign="top>1</td>
<td align="left" valign="top>2</td>
<td align="left" valign="top>3</td></tr>
<tr>
<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>
<td align="left" valign="top>8</td>
<td align="left" valign="top>9</td>
<td align="left" valign="top>10</td></tr>
<tr>
<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>
<td align="left" valign="top>15</td>
<td align="left" valign="top>16</td>
<td align="left" valign="top>17</td></tr>
<tr>
<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>
<td align="left" valign="top>22</td>
<td align="left" valign="top>23</td>
<td align="left" valign="top>24</td></tr>
<tr>
<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>
<td align="left" valign="top>29</td>
<td align="left" valign="top>30</td>
<td align="left" valign="top>31</td><tr></tbody></table>
To put the months side-by-side, enclose the month tables inside another table and in a row (tr.) Then put each inside a data cell (td) but use align=center and valign=middle inside the tag. You will have to be careful with the width attributes in the table tag.
Try cutting and pasting inside a text doc with a DTD and an HTM or HTML extension and view in a browser.
Peace,
Clarke
Hi,
Apologies, but there were errors and typos in the first iteration.
This the whole page of October through December for this year already in a complete document and validatedCode:<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<head>
<title>Calender</title>
<meta http-equiv=content-type content="text/html; charset=UTF-8">
<style type=text>
<div> {text-align:center;}
table {border-collapse:collapse;}
th {border-width:1px; font-weight:bold; font-size:14pt;}
td {border-width:1px; font-weight:bold; font-size:12pt; padding:5px 50px 50px 5px; text-align: left;}
</style>
</head>
<body>
<div>
<h2> Oct. - Dec. 2009</h2>
<table cellspacing="1" cellpadding="5" border="1" width="90%">
<thead>
<tr>
<th align="center" colspan="7">October</th></tr></thead>
<tbody>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td>1</td>
<td>2</td>
<td>3</td></tr>
<tr>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
<td>9</td>
<td>10</td></tr>
<tr>
<td>11</td>
<td>12</td>
<td>13</td>
<td>14</td>
<td>15</td>
<td>16</td>
<td>17</td></tr>
<tr>
<td>18</td>
<td>19</td>
<td>20</td>
<td>21</td>
<td>22</td>
<td>23</td>
<td>24</td></tr>
<tr>
<td>25</td>
<td>26</td>
<td>27</td>
<td>28</td>
<td>29</td>
<td>30</td>
<td>31</td></tr></tbody></table>
<br>
<table cellspacing="1" cellpadding="5" border="1" width="90%">
<thead>
<tr>
<th align="center" colspan="7">November</th></tr></thead>
<tbody>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td></tr>
<tr>
<td>8</td>
<td>9</td>
<td>10</td>
<td>11</td>
<td>12</td>
<td>13</td>
<td>14</td></tr>
<tr>
<td>15</td>
<td>16</td>
<td>17</td>
<td>18</td>
<td>19</td>
<td>20</td>
<td>21</td></tr>
<tr>
<td>22</td>
<td>23</td>
<td>24</td>
<td>25</td>
<td>26</td>
<td>27</td>
<td>28</td></tr>
<tr>
<td>29</td>
<td>30</td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td></tr></table>
<br>
<table cellspacing="1" cellpadding="5" border="1" width="90%">
<thead>
<tr>
<th align="center" colspan="7">December</th></tr></thead>
<tbody>
<tr>
<td> </td>
<td> </td>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td></tr>
<tr>
<td>6</td>
<td>7</td>
<td>8</td>
<td>9</td>
<td>10</td>
<td>11</td>
<td>12</td></tr>
<tr>
<td>13</td>
<td>14</td>
<td>15</td>
<td>16</td>
<td>17</td>
<td>18</td>
<td>19</td></tr>
<tr>
<td>20</td>
<td>21</td>
<td>22</td>
<td>23</td>
<td>24</td>
<td>25</td>
<td>26</td></tr>
<tr>
<td>27</td>
<td>28</td>
<td>29</td>
<td>30</td>
<td>31</td>
<td> </td>
<td> </td>
</tr></tbody></table>
</div></body></html>
Peace,
Clarke
| All times are GMT -7. The time now is 11:45 AM. |