HTML | Столы
Опубликовано: 1 Марта, 2022
Таблица - это расположение данных в строках и столбцах или, возможно, в более сложной структуре. Таблицы широко используются в коммуникации, исследованиях и анализе данных.
- Таблицы полезны для различных задач, таких как представление текстовой информации и числовых данных.
- Таблицы можно использовать для сравнения двух или более элементов в табличной форме.
- Таблицы используются для создания баз данных.
Определение таблиц в HTML
Таблица HTML определяется тегом «table». Каждая строка таблицы определяется тегом «tr». Заголовок таблицы определяется тегом «th». По умолчанию заголовки таблиц выделяются жирным шрифтом и выравниваются по центру. Данные / ячейка таблицы определяются тегом «td».
Example:
<!DOCTYPE html><html> <body> <table style="width:100%"> <tr> <th>Firstname</th> <th>Lastname</th> <th>Age</th> </tr> <tr> <td>Priya</td> <td>Sharma</td> <td>24</td> </tr> <tr> <td>Arun</td> <td>Singh</td> <td>32</td> </tr> <tr> <td>Sam</td> <td>Watson</td> <td>41</td> </tr> </table> </body> </html> |
Выход: 
Важные параметры таблицы в HTML :
- Adding a border to a HTML Table: A border is set using the CSS border property. If you do not specify a border for the table, it will be displayed without borders.
Example:
<!DOCTYPE html><html><head><style>table, th, td {border: 1px solid black;}</style></head><body><tablestyle="width:100%"><tr><th>Firstname</th><th>Lastname</th><th>Age</th></tr><tr><td>Priya</td><td>Sharma</td><td>24</td></tr><tr><td>Arun</td><td>Singh</td><td>32</td></tr><tr><td>Sam</td><td>Watson</td><td>41</td></tr></table></body></html>Output :
- Adding Collapsed Borders in a HTML Table: For borders to collapse into one border, add the CSS border-collapse property.
Example:
<!DOCTYPE html><html><head><style>table, th, td {border: 1px solid black;border-collapse: collapse;}</style></head><body><tablestyle="width:100%"><tr><th>Firstname</th><th>Lastname</th><th>Age</th></tr><tr><td>Priya</td><td>Sharma</td><td>24</td></tr><tr><td>Arun</td><td>Singh</td><td>32</td></tr><tr><td>Sam</td><td>Watson</td><td>41</td></tr></table></body></html>Output:
- Adding Cell Padding in a HTML Table: Cell padding specifies the space between the cell content and its borders.If we do not specify a padding, the table cells will be displayed without padding.
Example:<!DOCTYPE html><html><head><style>table, th, td {border: 1px solid black;border-collapse: collapse;}th, td {padding: 20px;}</style></head><body><tablestyle="width:100%"><tr><th>Firstname</th><th>Lastname</th><th>Age</th></tr><tr><td>Priya</td><td>Sharma</td><td>24</td></tr><tr><td>Arun</td><td>Singh</td><td>32</td></tr><tr><td>Sam</td><td>Watson</td><td>41</td></tr></table></body></html>Output:
- Adding Left Align Headings in a HTML Table : By default the table headings are bold and centered. To left-align the table headings,we must use the CSS text-align property.
Example:
<html><head><style>table, th, td {border: 1px solid black;border-collapse: collapse;}th, td {padding: 20px;}th {text-align: left;}</style></head><body><tablestyle="width:100%"><tr><th>Firstname</th><th>Lastname</th><th>Age</th></tr><tr><td>Priya</td><td>Sharma</td><td>24</td></tr><tr><td>Arun</td><td>Singh</td><td>32</td></tr><tr><td>Sam</td><td>Watson</td><td>41</td></tr></table></body></html>Output:
- Adding Border Spacing in a HTML Table: Border spacing specifies the space between the cells. To set the border spacing for a table,we must use the CSS border-spacing property.
Example:<html><head><style>table, th, td {border: 1px solid black;}table {border-spacing: 5px;}</style></head><body><tablestyle="width:100%"><tr><th>Firstname</th><th>Lastname</th><th>Age</th></tr><tr><td>Priya</td><td>Sharma</td><td>24</td></tr><tr><td>Arun</td><td>Singh</td><td>32</td></tr><tr><td>Sam</td><td>Watson</td><td>41</td></tr></table></body></html>Output:
- Adding Cells that Span Many Columns in HTMl Tables : To make a cell span more than one column, we must use the colspan attribute.
Example:<!DOCTYPE html><html><head><style>table, th, td {border: 1px solid black;border-collapse: collapse;}th, td {padding: 5px;text-align: left;}</style></head><body><h2>Cell that spans two columns:</h2><tablestyle="width:100%"><tr><th>Name</th><thcolspan="2">Telephone</th></tr><tr><td>Vikas Rawat</td><td>9125577854</td><td>8565557785</td></tr></table></body></html>Output:
- Adding Cells that Span Many Rows in HTML Tables: To make a cell span more than one row,we must use the rowspan attribute:
Example:<!DOCTYPE html><html><head><style>table, th, td {border: 1px solid black;border-collapse: collapse;}th, td {padding: 5px;text-align: left;}</style></head><body>РЕКОМЕНДУЕМЫЕ СТАТЬИ