TABLES IN HTML(ALL ABOUT TABLES IN HTML :)

tsk May 22, 2023

 tables in html :-

===============================================================
===============================================================

HTML tables allow web developers to arrange data into rows and columns.


In HTML, tables are created using the <table> element along with several other elements to structure the table, such as <tr> for table rows, <th> for table headers, and <td> for table cells. Here's an example of how to create a simple table in HTML:

<table>
  <tr>
    <th>Header 1</th>
    <th>Header 2</th>
    <th>Header 3</th>
  </tr>
  <tr>
    <td>Row 1, Cell 1</td>
    <td>Row 1, Cell 2</td>
    <td>Row 1, Cell 3</td>
  </tr>
  <tr>
    <td>Row 2, Cell 1</td>
    <td>Row 2, Cell 2</td>
    <td>Row 2, Cell 3</td>
  </tr>
</table>

You can have as many rows as you like in a table; just make sure that the number of cells are the same in each row.


Let's break down the structure of this table:

👉The <table> element is used to create the table container.

👉The <tr> element defines a table row.

The <th> element is used to create table headers, typically placed within the <tr> element that represents the table header row.

👉The <td> element creates table cells, which hold the actual data, and are usually placed within the <tr> elements that represent the table data rows.

👉In the example above, we have a table with three columns and two rows. The first row contains the table headers, while the subsequent rows contain the data in the table cells.

You can customize the table further by adding CSS styles or additional attributes to the HTML elements, such as colspan or rowspan, to merge cells horizontally or vertically.

===============================================================
===============================================================

Table Headers

Sometimes you want your cells to be table header cells. In those cases use the <th> tag instead of the <td> tag:

th stands for table header.


<table>
  <tr>
    <th>blog 1</th>
    <th>blog 2</th>
    <th>blog3</th>
  </tr>
  <tr>
    <td>con 1</td>
    <td>con 2</td>
    <td>con 3</td>
  </tr>
  <tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>
  </tr>
</table>

Here, the text in <th> elements are bold and centered, but you can change that with CSS.

===============================================================
===============================================================

HTML Table Tags

Tag Description

<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 formattin

<col>        ðŸ‘‰Specifies column properties for each column within a <colgroup>                                element 

<thead>         👉Groups the header content in a table

<tbody>         👉Groups the body content in a table

<tfoot>         👉Groups the footer content in a table


===============================================================
===============================================================

HTML TABLE BORDERS:-


tables can have borders of different styles and shapes.


HOW TO ADD A BORDER IN TABLE IN HTML :-

To add a border, use the CSS border property on table, th, and td elements:

<html>
<head>
<style>
table, th, td {
  border: 1px solid black;
  border-collapse: collapse;
}
</style>
</head>
<body>

<p>programming world</p>

<table style="width:100%">
  <tr>
    <th>f_name</th>
    <th>l_name</th> 
    <th>id</th>
  </tr>
  <tr>
    <td>sam</td>
    <td>parker</td>
    <td>12</td>
  </tr>
  <tr>
    <td>elli</td>
    <td>Jackson</td>
    <td>9</td>
  </tr>
  <tr>
    <td>John</td>
    <td>lee</td>
    <td>8</td>
  </tr>
</table>

</body>
</html>

===============================================================
===============================================================
To add borders to an HTML table, you can use CSS properties to define the border styles, widths, and colors. Here are the CSS properties commonly used to control table borders:

👉border: Sets the border properties for all sides of the table cells.

👉Example: border: 1px solid black; sets a solid black border with a width of 1 pixel.
border-collapse: Specifies whether the table borders should be collapsed into a single border or separated.

👉Example: border-collapse: collapse; collapses the borders into a single border.
border-spacing: Sets the spacing between adjacent cells when the borders are separated.

👉Example: border-spacing: 5px; sets a spacing of 5 pixels between cells.
border-width: Sets the width of the border.

👉Example: border-width: 2px; sets a border width of 2 pixels.
border-style: Sets the style of the border (e.g., solid, dashed, dotted, double).

👉Example: border-style: dashed; sets a dashed border style.
border-color: Sets the color of the border.

👉Example: border-color: red; sets a red border color.


Here's an example that demonstrates the usage of these properties to create a table with borders:

<style>
  table {
    border-collapse: collapse;
  }

  th, td {
    border: 1px solid black;
    padding: 8px;
  }
</style>

<table>
  <tr>
    <th>Header 1</th>
    <th>Header 2</th>
  </tr>
  <tr>
    <td>Cell 1</td>
    <td>Cell 2</td>
  </tr>
  <tr>
    <td>Cell 3</td>
    <td>Cell 4</td>
  </tr>
</table>


👉In the example above, the border-collapse: collapse; property is used to collapse the borders, making them appear as a single border. The border: 1px solid black; property is applied to both <th> and <td> elements to set a solid black border with a width of 1 pixel. Padding is also added to the cells using the padding property to create spacing between the content and the borders.

You can modify these CSS properties according to your desired border style and appearance.

==============================================================================================================================

TABLE SIZE:-

In HTML, you can control the size of a table in multiple ways, such as setting the width and height of the table itself, adjusting the size of individual table cells (td and th elements), or using CSS to style the table. Here are some approaches to controlling the size of an HTML table:


1:- Table Width:


Use the width attribute on the <table> element to set the width of the table in pixels (px) or as a percentage (%).
<table width="500px">
  <!-- table content -->
</table>

Alternatively, you can use CSS to set the width of the table:
<style>
  table {
    width: 500px;
  }
</style>



2:-Table Height:


The height attribute is not commonly used for tables, as the table height is typically determined by the content within it. However, you can use CSS to set the height of the table or its parent container.

3:-Cell Width and Height:


Use the width attribute on <td> or <th> elements to set the width of individual cells.
<td width="100px">Cell content</td>
You can also use CSS to set the width and height of cells:
<style>
  td {
    width: 100px;
    height: 50px;
  }
</style>



4:-CSS Styling:


You can use CSS properties like max-width, max-height, min-width, and min-height to control the size constraints of the table or its parent container.
<style>
  table {
    max-width: 800px;
  }
  td {
    min-width: 50px;
    max-width: 200px;
  }
</style>

👉Additionally, you can use CSS frameworks or custom CSS styles to control the size and responsiveness of tables in more complex ways.
Remember, when setting sizes for tables or cells, it's essential to consider the overall content, responsiveness, and user experience to ensure optimal display and usability on different devices and screen sizes.

==============================================================================================================================

TABLE HEADERS:-

===============================================================

Table headers in HTML are denoted using the <th> element. The <th> element is used to define a header cell within a table row (<tr>) and is typically used in the first row of the table to label or describe the data in the columns.


Here's an example of how to use table headers in 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>
  <!-- more rows -->
</table>


👉In the example above, we have a table with three columns. The first row contains table headers denoted by the <th> element. Each <th> element represents a header cell for a specific column. In this case, we have three headers: "Header 1", "Header 2", and "Header 3".
The subsequent rows (<tr>) contain the data cells (<td>) which hold the actual data for each column.

👉By default, table headers are visually distinguished from the regular table cells. The rendering may vary depending on the browser and CSS styles applied to the table. However, it's common for table headers to have bold text and centered alignment.
Table headers (<th>) are semantically important for accessibility purposes, as they provide a clear structure to assistive technologies and screen readers, allowing users to understand the content and navigate the table effectively.

===============================================================

HTML Table Padding & Spacing:-

===============================================================
===============================================================

Padding and spacing are two important concepts in HTML and CSS that can be used to control the layout and spacing within elements, including tables.


1:-Padding:

===============================================================

Padding refers to the space between the content of an element and its border. It can be set using the CSS property padding.

The padding property can take different values to specify the amount of padding on each side of an element, or using shorthand notation to set all sides at once.

<style>

  .box {

    padding: 10px; /* Sets 10 pixels of padding on all sides */

  }

</style>

<div class="box">Content with padding</div>


2:-Spacing:

===============================================================

Spacing refers to the distance between elements, such as cells in a table or elements within a container.
For table cells, the CSS property border-spacing can be used to define the spacing between adjacent cells when the table's border-collapse property is set to separate.


<style>
  table {
    border-collapse: separate;
    border-spacing: 5px; /* Sets 5 pixels of spacing between cells */
  }
</style>
<table>
  <tr>
    <td>Cell 1</td>
    <td>Cell 2</td>
  </tr>
</table>


For general spacing between elements, you can use CSS margin or padding properties to create space around or between elements.


<style>

  .element {

    margin: 10px; /* Sets 10 pixels of margin around the element */

  }

</style>

<div class="element">Element 1</div>

<div class="element">Element 2</div>


Both padding and spacing can be adjusted by specifying different values in pixels, percentages, or other CSS units. You can apply these properties to various HTML elements, including tables, divs, paragraphs, and more, to control the layout and spacing according to your design requirements.

===============================================================
===============================================================
===============================================================
===============================================================
===============================================================

tsk

Posted by tsk

Post a Comment

0 Comments