How to Create Table in HTML with Border without CSS ?
Creating a table in HTML is a fundamental skill for web developers. Tables are used to organize data in a grid-like structure, making it easier to read and understand. In this article, we will learn how to create a simple table in HTML with borders, without using CSS styling.
Step 1: Basic Table Structure
The basic structure of an HTML table consists of the <table>
element, which contains rows (<tr>
elements), and each row contains cells (<td>
elements for data cells or <th>
elements for header cells).
Here’s a simple example of a table with three rows and three columns:
HTML
< table > < tr > < th >Header 1</ th > < th >Header 2</ th > < th >Header 3</ th > </ tr > < tr > < td >Data 1</ td > < td >Data 2</ td > < td >Data 3</ td > </ tr > < tr > < td >Data 4</ td > < td >Data 5</ td > < td >Data 6</ td > </ tr > </ table > |
Step 2: Adding Borders to the Table
To add borders to the table without using CSS, we can use the border
attribute directly in the <table>
tag. The border
attribute specifies the width of the border in pixels.
Here’s how you can add a border to the entire table:
<table border="1">
<!-- Table rows and cells -->
</table>
Complete Code Example
Here’s a complete HTML example with a table that has borders:
HTML
<!DOCTYPE html> < html > < head > < title >HTML Table with Border</ title > </ head > < body > < table border = "1" > < tr > < th >Header 1</ th > < th >Header 2</ th > < th >Header 3</ th > </ tr > < tr > < td >Data 1</ td > < td >Data 2</ td > < td >Data 3</ td > </ tr > < tr > < td >Data 4</ td > < td >Data 5</ td > < td >Data 6</ td > </ tr > </ table > </ body > </ html > |
Output
Explanation
- The
<table border="1">
element creates a table with a border width of 1 pixel. - The
<tr>
elements define the table rows. - The
<th>
elements are used for table headers, and the<td>
elements are used for table data. - The borders are applied to the entire table, including the cells.