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:
<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:
<!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.