HTML Tables
The purpose of this article is to introduce you to the basics of HTML tables. This includes how to create a table using HTML tags, how to add data and formatting, and how to design tables that are effective and easy to use.
HTML tables enable website creators to organize data into rows and columns.
HTML tables are created by using the <table> tag, where table rows are created by <tr> tags and data cells are created by <td> tags.
Elements under <td> are automatically aligned to the left.
| Company | Contact | Country |
|---|---|---|
| Ankunding PLC | Raynor Christopher | Italy |
| Reichert LLC | Roberts Marisa | USA |
| Schaefer, Sipes and Macejkovic | Anais Kihn | France |
| Schoen Ltd | Briana | China |
| Koss LLC | Marques | Japan |
| Hermann PLC | Coby Wolff | London |
Example:
<!DOCTYPE html>
<html><body><br>
<br>
<br>
<style><br> h2{<br> font-size:40px;<br> text-align:center;<br> }<br> <br> table{<br> border:3px solid black;<br> }<br> th{<br> border:2px solid black;<br> font-size:25px;<br> padding:10px;<br> }<br> td{<br> border:2px solid black; <br> padding:12px;<br> width:170px;<br> text-align:center;<br> }<br> </style><br><br><br><h2>HTML Table</h2><br><table><br><tr><br><th>Company</th><br><th>Contact</th><br><th>Country</th><br></tr><br><tr><br><td>Ankunding PLC</td><br><td>raynor christopher</td><br><td>Italy</td><br></tr><br><tr><br><td>Reichert LLC</td><br><td>roberts marisa</td><br><td>USA</td><br></tr><br><tr><br><td>Schaefer, Sipes and Macejkovic</td><br><td>anais kihn</td><br><td>France</td><br></tr><br><tr><br><td>Schoen Ltd</td><br><td>briana</td><br><td>china</td><br></tr><br><tr><br><td>Koss LLC</td><br><td>marques</td><br><td>japan</td><br></tr><br><tr><br><td>Hermann PLC</td><br><td>coby wolff</td><br><td>london</td><br></tr><br></table><br><br>
</body></html>
Table Of Content-
- HTML Tables:
- Create an HTML Table:
- Add HTML Tables Border:
- HTML Tables – Collapsed Borders:
- HTML Tables – Left-align Headings:
- HTML Table – Add Border Spacing:
- HTML Tables – Add Cell Padding:
- HTML Tables Width and Height:
- HTML Tables – Cell that Spans Many Columns:
- HTML Tables – Cell that Spans Many Rows:
- HTML Table – Add a Caption:
- A Special Style for One Table:
Create an HTML Table
The <table> tag represents a table in an HTML document.
<tr> tags are utilized to characterize each table row.
The header of each table is described by a <th> tag. Several types of table data/cells are represented with the <td> tag.
The text in <th> elements is bold and centered by default, and text in <td> elements is left-aligned and regular by default.
The HTML table looks like this:
Example
<!DOCTYPE html>
<html>
<body><table style="width:100%">
<tr>
<th>F name</th>
<th>L name</th>
<th>Age</th>
</tr>
<tr>
<td>Johnny</td>
<td>Depp</td>
<td>50</td>
</tr>
<tr>
<td>Marc</td>
<td>Anthony</td>
<td>55</td>
</tr><tr>
<td>John</td>
<td>Doe</td>
<td>28</td>
</tr>
</table>
</body>
</html>
Note: Table data is contained in the <td> elements. Text, images, lists, other tables, and other HTML elements can be included in these documents.
Add HTML Tables Border
Use CSS border property to add a border to a table:
Example:
<!DOCTYPE html>
<html><body><br><br><br><style><br><br>table, th, td<br>{<br>border: 2px solid grey;<br>}<br><br></style><br><br><table style="width:100%"><br><tr><br><th>F name</th><br><th>L name</th><br><th>Age</th><br></tr><br><tr><br><td>Johnny</td><br><td>Depp</td><br><td>50</td><br></tr><br><tr><br><td>Marc</td><br><td>Anthony</td><br><td>55</td><br></tr><br><br><tr><br><td>John</td><br><td>Doe</td><br><td>28</td><br></tr><br></table><br><br>
</body></html>
HTML Tables – Collapsed Borders
You can collapse the borders into one by adding the CSS border-collapse property:
Example:
<!DOCTYPE html>
<html><body><br><br><br><br><br><style><br><br>table, th, td {<br>border: 2px solid grey;border-collapse: collapse;<br>}<br><br></style><br><br><table style="width:100%"><br><tr><br><th>F name</th><br><th>L name</th><br><th>Age</th><br></tr><br><tr><br><td>Johnny</td><br><td>Depp</td><br><td>50</td><br></tr><br><tr><br><td>Marc</td><br><td>Anthony</td><br><td>55</td><br></tr><br><br><tr><br><td>John</td><br><td>Doe</td><br><td>28</td><br></tr><br></table><br><br>
</body></html>
HTML Tables – Left-align Headings
Table headings are bolded and centered by default.
The CSS text-align property can be used to left-align the table headings:
Example:
<!DOCTYPE html>
<html><body><br><br><br><br><br><style><br><br>table, th, td {<br>border: 2px solid grey;border-collapse: collapse;<br>text-align: center;<br>}<br><br></style><br><br><table style="width:100%"><br><tr><br><th>F name</th><br><th>L name</th><br><th>Age</th><br></tr><br><tr><br><td>Johnny</td><br><td>Depp</td><br><td>50</td><br></tr><br><tr><br><td>Marc</td><br><td>Anthony</td><br><td>55</td><br></tr><br><br><tr><br><td>John</td><br><td>Doe</td><br><td>28</td><br></tr><br></table><br><br><br>
</body></html>
HTML Table – Add Border Spacing
The border-spacing between cells defines the distance between them.
CSS border-spacing can be used to set the border-spacing for a table:
Note that border-spacing has no impact if the table collapses.
Example:
<!DOCTYPE html>
<html><body><br><br><br><br><br><style><br><br>table, th, td {<br>border: 2px solid grey;border-collapse: collapse;<br>text-align: center;<br>border-spacing: 3px;<br><br>}<br><br><br></style><br><br><table style="width:100%"><br><tr><br><th>F name</th><br><th>L name</th><br><th>Age</th><br></tr><br><tr><br><td>Johnny</td><br><td>Depp</td><br><td>50</td><br></tr><br><tr><br><td>Marc</td><br><td>Anthony</td><br><td>55</td><br></tr><br><br><tr><br><td>John</td><br><td>Doe</td><br><td>28</td><br></tr><br></table><br><br>
</body></html>
HTML Tables – Add Cell Padding
The padding between the border and the cell content describes the space between the two.
Table cells will show without padding if you do not select a padding.
The CSS padding property can be utilized to set padding:
Example:
<!DOCTYPE html>
<html><body><br><br><br><br><br><style><br><br>table, th, td {<br>border: 2px solid grey;border-collapse: collapse;<br>text-align: center;<br>border-spacing: 3px;<br>}<br>th, td {<br>padding: 30px;<br>}<br><br><br><br></style><br><br><table style="width:100%"><br><tr><br><th>F name</th><br><th>L name</th><br><th>Age</th><br></tr><br><tr><br><td>Johnny</td><br><td>Depp</td><br><td>50</td><br></tr><br><tr><br><td>Marc</td><br><td>Anthony</td><br><td>55</td><br></tr><br><br><tr><br><td>John</td><br><td>Doe</td><br><td>28</td><br></tr><br></table><br><br><br>
</body></html>
HTML Tables Width and Height
Using the width and height attributes, you can adjust the width and height of a table. In addition to defining table width and height in pixels, you can specify them as percent of available screen space. See example below:
Example:
<!DOCTYPE html>
<html>
<head>
<title>Table with Width & Height</title>
</head>
<body>
<table border="1" width="250" height="100">
<tr>
<td>Elon Musk</td>
<td>Jeff Bezos</td>
</tr>
<tr>
<td>Steve Jobs</td>
<td>Mark Zuckerberg</td>
</tr>
</table>
</body>
</html>
HTML Tables – Cell that Spans Many Columns
Utilize the colspan attribute to create a cell span of more than one column:
Example:
<!DOCTYPE html>
<html><body><br><br><br> <style><br> h2{<br> font-size:40px;<br> text-align:center;<br> }<br> <br> table{<br> border:3px solid black;<br> }<br> th{<br> border:2px solid black;<br> font-size:25px;<br> padding:10px;<br> }<br> td{<br> border:2px solid black; <br> padding:12px;<br> width:170px;<br> text-align:center;<br> }<br> </style><br><br><br><br><table style="width:100%"><br><tr><br><th>Name</th><th colspan="2">Telephone</th><br></tr><br><tr><td>Elon Musk</td><br><td>99955544</td><td>99955545</td><br></tr><br></table><br><br><br>
</body></html>
HTML Tables – Cell that Spans Many Rows
Utilize the rowspan attribute to create a cell span of more than one row:
Example:
<!DOCTYPE html>
<html><body><br><br><br> <style><br> h2{<br> font-size:40px;<br> text-align:center;<br> }<br> <br> table{<br> border:3px solid black;<br> }<br> th{<br> border:2px solid black;<br> font-size:25px;<br> padding:10px;<br> }<br> td{<br> border:2px solid black; <br> padding:12px;<br> width:170px;<br> text-align:center;<br> }<br> </style><br><br><br><br><table style="width:100%"><br><tr><br><th>Name:</th><br><td>Elon Musk</td><br></tr><tr><br><th rowspan="2">Telephone:</th><td>99955544</td><br></tr><br><tr><td>99955545</td><br></tr><br></table><br><br><br>
</body></html>
HTML Table – Add a Caption
Captions are added to tables with the <caption> tag:
Please remember to include the <caption> tag right after the <table> tag.
Example:
<!DOCTYPE html>
<html><body><br><br><br> <style><br> h2{<br> font-size:40px;<br> text-align:center;<br> }<br> <br> table{<br> border:3px solid black;<br> }<br> th{<br> border:2px solid black;<br> font-size:25px;<br> padding:10px;<br> }<br> td{<br> border:2px solid black; <br> padding:12px;<br> width:170px;<br> text-align:center;<br> }<br> caption{<br> font-size: 32px;<br> font-weight:bolder;<br> }<br> </style><br><br><br><br><table style="width:100%"><br><caption>Total Monthly savings</caption><br><tr><br><th>Month</th><br><th>Savings</th><br></tr><br><tr><br><td>January</td><br><td>$200</td><br></tr><br><tr><br><td>February</td><br><td>$300</td><br></tr><br></table><br><br><br>
</body></html>
A Special Style for One Table
Adding an id attribute to a table will let you specify a characteristic style for it:
Example:
<!DOCTYPE html>
<html>
<body><table id="t01">
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td>kevin</td>
<td>smith</td>
<td>32</td>
</tr>
</table></body>
</html>
You can particularly design only the desired table
<!DOCTYPE html>
<html><body><p>Example:Execute
</p><br><br><br><style><br><br>#t01 {<br>width: 100%;<br>background-color: #f1f1c1;<br>}<br><br></style><br><br><br><br><table id="t01"><br><tr><br><th>Firstname</th><br><th>Lastname</th><br><th>Age</th><br></tr><br><tr><br><td>kevin</td><br><td>smith</td><br><td>32</td><br></tr><br></table><br><br><br></body></html>
You can also add more styling to the table as shown in the example below:
Example:
<!DOCTYPE html>
<html><body><br><br><br><style><br><br>#t01 tr:nth-child(even) {<br>background-color: #eee;<br>}<br>#t01 tr:nth-child(odd) {<br>background-color: #fff;<br>}<br>#t01 th {<br>color: white;<br>background-color: black;<br>}<br><br></style><br><br><br><br><table id="t01"><br><tr><br><th>Firstname</th><br><th>Lastname</th><br><th>Age</th><br></tr><br><tr><br><td>kevin</td><br><td>smith</td><br><td>32</td><br></tr><br></table><br><br><br>
</body></html>
HTML Table Tags
| Tag | Overview |
|---|---|
| <table> | Creates a table. |
| <col> | Column attributes are defined for each column inside a <colgroup> element. |
| <tr> | In a table, it specifies a row. |
| <td> | Creates a cell in a table. |
| <caption> | Creates a table caption. |
| <th> | Provides a header cell for a table. |
| <colgroup> | Formats one or more columns in a table. |
| <thead> | An arranged table of header content. |
| <tfoot> | Makes a table with the footer content in it. |
| <tbody> | Creates a table with the body content in it. |
Note: HTML Tag Reference lists all possible tags.
Chapter Summary
- Represent tables using Html Tables <table> element.
- Operate the HTML <tr> element to describe a table row.
- Utilize the HTML <td> element to define a table data.
- Table headings are specified using the HTML <th> element.
- Use the HTML <caption> element to add captions to tables.
- Establish a border using the CSS border property.
- To collapse cell borders, use the CSS border-collapse property.
- To add padding to cells, use the CSS padding property.
- For alignment of cell text, use the CSS text-align property.
- You can adjust the spacing between cells using the CSS border-spacing property.
- Create a multi-column span using the colspan attribute.
- Make a cell span many rows by using the rowspan attribute.
- To uniquely identify one table, use the id attribute.
If this article helped you in learning about HTML tables, do share this meaningful information with your friends by clicking on the links below.
We value your feedback.
+1
+1
+1
+1
+1
+1
+1
