HTML Tables
➠ HTML Tables :
HTML tables are a way to display data in rows and columns. They consist of one or more rows, which contain table cells. HTML tables are defined using the 'table' element and its related elements. Here is a basic example of an HTML table:
<table>
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Age</th>
</tr>
<tr>
<td>Sathru</td>
<td>Nani</td>
<td>25</td>
</tr>
<tr>
<td>Gayathri</td>
<td>Krishna</td>
<td>30</td>
</tr>
</table>
In this example, the 'table' element defines the table, the 'tr' element defines a row, the 'th' element defines a header cell, and the 'td' element defines a data cell. The first row is typically used to define the column headers, while the subsequent rows contain the actual data.
HTML tables can be customized using a variety of attributes and CSS styles. Here are some common attributes you can use to customize tables:
- border: sets the width of the table border
- cellspacing: sets the space between cells
- cellpadding: sets the space between the cell content and cell border
- align: aligns the table within its container
- bgcolor: sets the background color of the table
Here is an example of how to use these attributes:
<table border="1" cellspacing="0" cellpadding="5" align="center" bgcolor="#efefef">
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Age</th>
</tr>
<tr>
<td>Rahul</td>
<td>Vinay</td>
<td>36</td>
</tr>
<tr>
<td>Chinranjivi</td>
<td>Venkatesh</td>
<td>25</td>
</tr>
</table>
In addition to these attributes, you can also use CSS to customize the appearance of tables. For example, you can use CSS to set the font size and style of table text, change the background color of table cells, and more.
Overall, HTML tables are a versatile tool for displaying data on a web page. With a little bit of customization, you can create tables that fit seamlessly into your website design and make it easy for visitors to read and understand your data.
➠ HTML table cells :
HTML table cells are the individual boxes that make up a table. They can contain text, images, or other HTML elements. Table cells are defined using the 'td' (table data) element. Here is an example of how to define a basic table cell:
<td>Some data</td>
In this example, the 'td' element defines the table cell, and the text "Some data" is the content of the cell. Table cells are typically used to display data within a table, and they are organized into rows using the 'tr' (table row) element.
Table cells can be customized using a variety of HTML attributes and CSS styles. For example, you can use the 'colspan' attribute to span a cell across multiple columns, or the 'rowspan' attribute to span a cell across multiple rows. Here is an example of how to use the 'colspan" attribute:
<table>
<tr>
<td colspan="2">This cell spans two columns</td>
<td>Another cell</td>
</tr>
<tr>
<td>A cell</td>
<td>Another cell</td>
<td>Yet another cell</td>
</tr>
</table>
In this example, the first cell in the first row spans two columns, while the second cell in the first row is a regular cell. The second row contains three regular cells.
You can also use CSS to style table cells. For example, you can change the font size and color, set a background color or image, and more. Here is an example of how to use CSS to set the background color of table cells:
<style>
td {
background-color: #efefef;
}
</style>
<table>
<tr>
<td>Some data</td>
<td>More data</td>
</tr>
<tr>
<td>Other data</td>
<td>Even more data</td>
</tr>
</table>
In this example, the CSS sets the background color of all table cells to light gray (#efefef).
Overall, HTML table cells are a flexible and powerful tool for displaying data on a web page. With a little bit of customization, you can create tables that fit seamlessly into your website design and make it easy for visitors to read and understand your data.
➠ HTML table rows :
HTML table rows are a collection of table cells that represent a horizontal segment of a table. They are defined using the 'tr' (table row) element. Each row contains one or more table cells, which are defined using the 'td' (table data) element. Here is an example of a basic table row:
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
<td>Cell 3</td>
</tr>
Table rows are typically used to organize data in a table. They can be customized using a variety of HTML attributes and CSS styles. For example, you can use the 'bgcolor' attribute to set the background color of a row, or the 'align' attribute to align the content of the row. Here is an example of how to use the bgcolor attribute:
<table>
<tr bgcolor="#efefef">
<td>Cell 1</td>
<td>Cell 2</td>
<td>Cell 3</td>
</tr>
<tr>
<td>Cell 4</td>
<td>Cell 5</td>
<td>Cell 6</td>
</tr>
</table>
In this example, the first row has a light gray background color (#efefef), while the second row has a white background.
You can also use CSS to style table rows. For example, you can change the font size and color, set a background color or image, and more. Here is an example of how to use CSS to set the background color of table rows:
<style>
tr {
background-color: #efefef;
}
</style>
<table>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
<td>Cell 3</td>
</tr>
<tr>
<td>Cell 4</td>
<td>Cell 5</td>
<td>Cell 6</td>
</tr>
</table>
In this example, the CSS sets the background color of all table rows to light gray (#efefef).
Overall, HTML table rows are a powerful tool for organizing and displaying data on a web page. With a little bit of customization, you can create tables that fit seamlessly into your website design and make it easy for visitors to read and understand your data.
➠ HTML table headings :
HTML table headings are used to provide context and organization to tables. They are defined using the 'th' (table header) element, which is similar to the 'td' (table data) element used for regular table cells. However, 'th' elements are used specifically for header cells and are typically displayed in bold text by default.
Here is an example of a basic table with header cells:
<table>
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Email Address</th>
</tr>
<tr>
<td>Vevek</td>
<td>Karthikeya</td>
<td>onlineweblearn@example.com</td>
</tr>
<tr>
<td>Ganesh</td>
<td>Kohli</td>
<td>vamshi@example.com</td>
</tr>
</table>
In this example, the first row contains three 'th' elements that serve as the header cells for the table. The second and third rows contain regular 'td' elements that represent data cells.
Header cells can be customized using the same HTML attributes and CSS styles as regular table cells. For example, you can use the 'colspan' and 'rowspan' attributes to span header cells across multiple columns or rows. Here is an example of how to use the 'colspan' attribute:
<table>
<tr>
<th colspan="2">Name</th>
<th>Email Address</th>
</tr>
<tr>
<th>First Name</th>
<th>Last Name</th>
<td>rakesh@example.com</td>
</tr>
<tr>
<th>First Name</th>
<th>Last Name</th>
<td>vamshi@example.com</td>
</tr>
</table>
In this example, the first header cell in the first row spans two columns, while the second header cell in the first row is a regular cell. The second and third rows contain regular cells for data.
HTML table headings are an important tool for organizing and displaying data in a table. They provide context and make it easier for visitors to understand the data in the table. With a little bit of customization, you can create tables that fit seamlessly into your website design and make it easy for visitors to read and understand your data.
| TAG | DECRIPTION |
| <table> | Defines a table |
| <th> | Defines a header cell in a table |
| <tr> | Defines a row in a table |
| <td> | Defines a cell in a table |
| <caption> | Defines a table caption |
| <colgroup> | Specifies a group of one or more columns in a table for formatting |
| <col> | Specifies column properties for each column within a |
| <tbody> | Groups the body content in a table |
| <thead> | Groups the header content in a table |
| <tfoot> | Groups the footer content in a table |
