HTML Table Border
In HTML, you can add border to a table by applying CSS styles.
You can also add border to a table using the border attribute within the <table> tag .
How to Add Border to an HTML Table Using CSS Styles
Create an HTML table as shown in the following example.
Add HTML <style> element inside the head section of your page.
Use 'table' as selector and add 'border-collapse: collapse;' CSS style to the table selector. It helps create a cleaner and more compact appearance for the table.
Use 'th, td' as selectors and add 'border: 1px solid #808080; text-align: left; padding: 8px; CSS styles to the table header and table data selectors.
'border: 1px solid #808080;' CSS style sets 1px solid border to the the table header and table data of the table.
'text-align: left;' CSS style sets the align of the text to the left.
'padding: 8px;' CSS style sets 8px padding.
Have a closer look at the code and its output:
Example of HTML Table With Border
Output of the above code example
Example of Table in a Webpage
| Name | Gender | Age |
|---|---|---|
| Alice Jonathon | Female | 15 |
| Peter Parker | Male | 16 |
In the above example, data have been presented in a tabular format with table border.
