Creating Tables in HTML
Tables are a commonly used way to present data because:
- Tables present information in a comprehensive manner.
- Tables are used to organize data that is too complicated to be described adequately with simple text, allowing the reader to instantly see the outcomes.
To create a table in HTML the Table Tag(<table>)is used.
The Caption tag(<caption>) specifies the title of the table.
The table contains rows which begin with the Table Row tag(<tr>).
Table Row tags contain Table Heading tags and Table Data tags.
The Table Heading tag(<th>) specifies the heading of the column.
By default, the text within the <th> tag is bold.
The Table Data tag(<td>) specifies the data in the cell.
The Table Data tag(<td>) specifies the data in the cell.
Attributes of the Table Tag
| border | Specifies the width of the border of the table in pixels. If the value is not specified or given to be 0, the table will not be bordered. | <table border = "3"> |
| bordercolor | Specifies the color of the border of the table. The default color is gray, but you can change it by assigning a different color name. | <table border = "3" bordercolor="#0000FF"> |
| bgcolor | Specifies the background color of the table. The default color is gray, but you can change it by assigning a different color name. | <table border = "3" bgcolor = "#add8e6"> |
| align | Used to set the alignment of the table. The default alignment is left. The alignment can be set to center, right or left. | <table border = "3" align = "center"> |
| cellpadding | Used to set the distance between the cell boundary and the contents of the cell. The default value is 2. | <table border = "3" cellpadding="4"> |
| cellspacing | Used to set the distance between the cell boundaries of two adjacent cells. Its default value is 2. | <table border = "3" cellspacing="6"> |
| height | The height attribute sets the total height of the table. Values can be specified in pixels or by giving relative percentage of the screen size. | <table border = "3" height="120%"> |
| width | The width attribute sets the width of the table. You can specify the width either in pixels or by giving relative percentage of the screen size. | <table border = "3" height="400" width="50%"> |
border - Specifies the width of the border of the table in pixels. If the value is not specified or given to be 0, the table will not be bordered.
bordercolor - Specifies the color of the border of the table. The default color is gray, but you can change it by assigning a different color name.
bgcolor - Specifies the background color of the table. The default color is gray, but you can change it by assigning a different color name.
align - Used to set the alignment of the table. The default alignment is left. The alignment can be set to center, right or left.
cellpadding - Used to set the distance between the cell boundary and the contents of the cell. The default value is 2.
cellspacing - Used to set the distance between the cell boundaries of two adjacent cells. Its default value is 2.
height - The height attribute sets the total height of the table. Values can be specified in pixels or by giving relative percentage of the screen size.
width - The width attribute sets the width of the table. You can specify the width either in pixels or by giving relative percentage of the screen size.
Attributes of the <tr>, <th> and <td> Tags
| bordercolor | You can set the color of the border of any specific cell of the table. | <tr bordercolor="red"> |
| bgcolor | You can set the background color of any specific cell of the table. | <th bgcolor="yellow"> |
| align | Lets you set the alignment of text within cells. The default alignment is left. The alignment can be set to center, right or left. | <td bgcolor = "yellow" align = "center"> |
| valign | This attribute is used to set the vertical alignment of text within cells. The default vertical alignment is center. The vertical alignment can be set to middle, top or bottom. | <td align="center" bordercolor="red" valign="bottom"> |
| colspan | The COLSPAN attribute combines two or more horizontally-placed cells. It specifies the number of cells to be combined. | <th bordercolor="red" colspan="5"> |
| rowspan | The ROWSPAN attribute combines two or more vertically-placed cells. It specifies the number of cells to be combined. | <td bgcolor="yellow" rowspan="3"> |
bordercolor - You can set the color of the border of any specific cell of the table.
bgcolor - You can set the background color of any specific cell of the table.
align - Lets you set the alignment of text within cells. The default alignment is left. The alignment can be set to center, right or left.
valign - This attribute is used to set the vertical alignment of text within cells. The default vertical alignment is center. The vertical alignment can be set to middle, top or bottom.
colspan - The COLSPAN attribute combines two or more horizontally-placed cells. It specifies the number of cells to be combined.
rowspan - The ROWSPAN attribute combines two or more vertically-placed cells. It specifies the number of cells to be combined.
For Example:
<html>
<head>
<title>Example | Kode.Blox
</title>
</head>
<body>
<table cellpadding="3"
border="2" bordercolor="red"
height="100%" width="100%"
align="center">
<tr>
<th colspan="4"
bordercolor="red">
<font size="5"
color="red">
Workout Log</font>
</th>
</tr>
<tr align
="center" bgcolor="#FFB8A6">
<th>NAME
</th>
<th>Chest Exercises
</th>
<th>Back Exercises
</th>
<th>Leg Exercises
</th>
</tr>
<tr valign="middle"
align="center">
<td rowspan="2">
Nehmar</td>
<td>Barbell bench press
</td>
<td>Lat pulldown
</td>
<td>Lunges
</td>
</tr>
<tr valign="middle"
align="center">
<td>Cable crossovers
</td>
<td>Wide dumbbell row
</td>
<td>Single-Leg Deadlift
</td>
</tr>
<tr valign="middle"
align="center">
<td rowspan="2">
Ristiano</td>
<td>Pushups
</td>
<td>Pullups
</td>
<td>Squats
</td>
</tr>
<tr valign="middle"
align="center">
<td>Bar Dips
</td>
<td>Bodyweight Rows
</td>
<td>Bulgarian Split Squat
</td>
</tr>
<tr valign="middle"
align="center">
<td rowspan="2">
Lashford</td>
<td>Isometric Chest Squeeze
</td>
<td>Single-arm dumbbell row
</td>
<td>Seated Leg Press
</td>
</tr>
<tr valign="middle"
align="center">
<td>Seated Machine Chest Press
</td>
<td>Reverse-grip row
</td>
<td>Angled Leg Curl
</td>
</tr>
</table>
</body>
</html>