The Html part of Tables
Html for Tables
- <table></table>
- First and last tag in a html table.
- <tr></tr>
- First and last tag in each row in the table
- <th></th>
- Table header cell. Bold and centered by default. Used at top of column or left of row to define what is in the column or row. First and last tag in a header cell. Creates one cell.
- <td></td>
- Table Data cell. Regular text and left aligned by default. First and last tag of each cell in a table. You either use the <th></th> tags or the <td></td> tags for each cell in a table. Each row of cells will be in between a set of <tr></tr> Table row tags. All the table rows will be in between a set of <table></table> table tags.
- <caption></caption>
- Table caption appears right above the table to give the table a name. Like the line above the calender that says "March 2023".The caption <caption></caption> tags go in between the first <table> tag and the first <tr> tag.
- <td rowspan="2"></td>
- This makes a cell span more than one row. The number is how many rows to span.
- <td colspan="2"></td>
- This makes a cell span more than one column. The number is how many columns to span.
Below is a table with no styling done to it except on the mobile screen. I had to put padding on the left of the table and shrink the font size on the
th tag so it would
fit on the screen. It has no borderlines. On top there is a caption that says March 2023. There are six rows. The top row
has all <th> cells for the days of the week. The other five rows has all <td> cells. There is CSS we will apply to this to make it look
better.
| Sunday | Monday | Tuesday | Wednesday | Thursday | Friday | Saturday |
|---|---|---|---|---|---|---|
| 1 | 2 | 3 | 4 | |||
| 5 | 6 | 7 | 8 | 9 | 10 | 11 |
| 12 | 13 | 14 | 15 | 16 | 17 | 18 |
| 19 | 20 | 21 | 22 | 23 | 24 | 25 |
| 26 | 27 | 28 | 29 | 30 | 31 |
This is the Html for the table above.
<table>
<caption>March 2023</caption>
<tr>
<th>Sunday</th>
<th>Monday</th>
<th>Tuesday</th>
<th>Wednesday</th>
<th>Thursday</th>
<th>Friday</th>
<th>Saturday</th>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
<td>9</td>
<td>10</td>
<td>11</td>
</tr>
<tr>
<td>12</td>
<td>13</td>
<td>14</td>
<td>15</td>
<td>16</td>
<td>17</td>
<td>18</td>
</tr>
<tr>
<td>19</td>
<td>20</td>
<td>21</td>
<td>22</td>
<td>23</td>
<td>24</td>
<td>25</td>
</tr>
<tr>
<td>26</td>
<td>27</td>
<td>28</td>
<td>29</td>
<td>30</td>
<td>31</td>
<td></td>
</tr>
</table>
CSS for table on next page----> Coming soon