Tables in HTML
Tables: Building tables using <table>, <tr>, <td>, <th>, and related tags.
Creating tables in HTML involves using several elements such as <table>, <tr>, <td>, and <th>. These elements allow you to structure and display tabular data on a web page. Here's how to build tables using these HTML tags:
<table> Element: The <table> element is used to create a table on a web page. It acts as a container for all the table-related elements.
html code
<table>
<!-- Table content goes here -->
</table>
<tr> Element: The <tr> element stands for "table row" and is used to define rows within the table.
html code
<table>
<tr>
<!-- Table row content goes here -->
</tr>
<tr>
<!-- Another row -->
</tr>
</table>
<td> Element: The <td> element is used to define individual data cells (table data) within a row. This is where you place the actual content of your table.
html code
<table>
<tr>
<td>Data 1</td>
<td>Data 2</td>
</tr>
<tr>
<td>Data 3</td>
<td>Data 4</td>
</tr>
</table>
<th> Element: The <th> element stands for "table header" and is used to define header cells within a row. Header cells are typically used to label columns or rows.
html code
<table>
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
</tr>
</table>
Attributes: You can use various attributes to further define your table and its elements. Some common attributes include:
colspan: Specifies the number of columns a cell should span.
rowspan: Specifies the number of rows a cell should span.
border: Sets the border around the table (deprecated in HTML5, better to use CSS for styling).
width: Sets the width of the table or a table cell.
Here's an example of a more complex table with headers, data cells, and merged cells:
html code
<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 rowspan="2">Merged Cell</td>
</tr>
<tr>
<td>Data 3</td>
<td>Data 4</td>
</tr>
</table>
Remember that the styling of tables is often done using CSS to control the appearance of borders, padding, and spacing. The HTML elements provide the structure, and CSS is used for presentation.
Comments
Post a Comment