CSS(Attributes and VALUES)

Sure! Here’s a list of common CSS properties (attributes) and their typical
values:

1. Layout Properties:
- `display`: Defines how an element is displayed.
Values: `block`, `inline`, `inline-block`, `flex`, `grid`, `none`, `inline-flex`,
`inline-grid`

- `position`: Specifies the positioning method.

Values: `static`, `relative`, `absolute`, `fixed`, `sticky`

- `top`, `right`, `bottom`, `left`: Specifies the offset of a positioned element

from its containing element.
Values: Length units like `px`, `em`, `rem`, `%`, or `auto`

- `z-index`: Controls the stacking order of elements.

Values: `auto`, integer values like `1`, `2`, `100`, etc.

- `float`: Specifies floating behavior of an element.

Values: `left`, `right`, `none`

- `clear`: Specifies the behavior of floating elements.

Values: `left`, `right`, `both`, `none`

2. Box Model Properties:

- `width`, `height`: Specifies the size of the element.
Values: Length units (`px`, `em`, `%`, `rem`, `vw`, `vh`, etc.)

- `padding`: Specifies space between content and border.

Values: Length units (`px`, `em`, `%`, etc.)

- `margin`: Specifies space around the element.

Values: Length units (`px`, `em`, `%`, etc.)

- `border`: Specifies the border of an element.

Values: `border: width style color;` (e.g., `2px solid #000`)
- `box-sizing`: Defines how the total width and height of an element is
calculated.
Values: `content-box`, `border-box`

3. Typography Properties:
- `font-family`: Specifies the font of the text.
Values: Font name (e.g., `Arial`, `Times New Roman`, `'Helvetica Neue'`)

- `font-size`: Specifies the size of the text.

Values: Length units (`px`, `em`, `%`, etc.)

- `font-weight`: Specifies the weight of the font.

Values: `normal`, `bold`, `lighter`, `bolder`, or numeric values (100–900)

- `font-style`: Specifies the style of the text.

Values: `normal`, `italic`, `oblique`

- `line-height`: Defines the space between lines of text.

Values: Length units, or unitless (e.g., `1.5`, `20px`, etc.)

- `text-align`: Specifies the horizontal alignment of text.

Values: `left`, `right`, `center`, `justify`

- `text-transform`: Specifies the capitalization of text.

Values: `none`, `uppercase`, `lowercase`, `capitalize`

- `letter-spacing`: Specifies space between characters.

Values: Length units (`px`, `em`, etc.)

- `text-decoration`: Adds decoration to text.

Values: `none`, `underline`, `overline`, `line-through`

4. Background Properties:
- `background-color`: Sets the background color of an element.
Values: Color names (`red`, `blue`, etc.), hex (`#000`), rgb (`rgb(255, 0, 0)`)

- `background-image`: Sets an image as the background.

Values: `url(path_to_image)`, `none`

- `background-size`: Defines the size of the background image.

 Values: `cover`, `contain`, or length values (`100px`, `50%`, etc.)

- `background-position`: Sets the starting position of a background image.

Values: Keywords (`top`, `right`, `center`, `bottom`, `left`), or length (`px`,
`%`)

- `background-repeat`: Defines if a background image should repeat.

Values: `repeat`, `no-repeat`, `repeat-x`, `repeat-y`

5. Flexbox Properties:
- `display: flex`: Activates flexbox layout on the container.

- `flex-direction`: Defines the direction of the flex items.

Values: `row`, `row-reverse`, `column`, `column-reverse`

- `justify-content`: Aligns items horizontally (main axis).

Values: `flex-start`, `flex-end`, `center`, `space-between`, `space-around`

- `align-items`: Aligns items vertically (cross axis).

Values: `flex-start`, `flex-end`, `center`, `baseline`, `stretch`

- `align-self`: Aligns a single flex item on the cross axis.

Values: `auto`, `flex-start`, `flex-end`, `center`, `baseline`, `stretch`

- `flex-grow`: Defines the ability of a flex item to grow relative to others.

Values: `number` (e.g., `1`, `0`)

- `flex-shrink`: Defines the ability of a flex item to shrink relative to others.

Values: `number` (e.g., `1`, `0`)

- `flex-basis`: Specifies the initial size of a flex item.

Values: Length units (`px`, `em`, `%`, etc.), `auto`

- `flex`: A shorthand for `flex-grow`, `flex-shrink`, and `flex-basis`.

Values: `flex-grow flex-shrink flex-basis` (e.g., `1 0 100px`)

6. Grid Layout Properties:

- `display: grid`: Activates grid layout.
- `grid-template-columns`, `grid-template-rows`: Defines the number of
columns or rows.
Values: Length units (`px`, `fr`, `%`, `auto`), e.g., `100px 1fr 2fr`

- `grid-column-gap`, `grid-row-gap`: Defines the gap between columns or

rows.
Values: Length units (`px`, `em`, etc.)

- `grid-gap`: A shorthand for `grid-column-gap` and `grid-row-gap`.

- `grid-column`: Defines the start and end position of a grid item in

columns.
Values: `start / end`, e.g., `1 / 3`

- `grid-row`: Defines the start and end position of a grid item in rows.
Values: `start / end`, e.g., `2 / 4`

7. Border Properties:
- `border-radius`: Defines the radius of the element's corners.
Values: Length units (`px`, `em`, `%`), e.g., `10px`

- `border-style`: Defines the style of the border.

Values: `none`, `solid`, `dashed`, `dotted`, `double`, `groove`, `ridge`, `inset`,
`outset`

- `border-width`: Specifies the width of the border.

Values: Length units (`px`, `em`, etc.), or keywords (`thin`, `medium`, `thick`)

- `border-color`: Specifies the color of the border.

Values: Color names, hex (`#000`), rgb (`rgb(255, 0, 0)`), rgba, etc.

8. Animation & Transition Properties:

- `transition`: Defines the transition effects when an element changes state.
Values: `property duration timing-function delay`, e.g., `all 0.3s ease-in-out`

- `animation`: Defines keyframe animations for an element.

Values: `name duration timing-function delay iteration-count direction`

- `@keyframes`: Specifies the keyframes for CSS animations.

Example:
 ```css
@keyframes example {
from { background-color: red; }
to { background-color: blue; }
}
```

9. Transform & 3D Properties:

- `transform`: Applies transformations to an element.
Values: `rotate()`, `scale()`, `translate()`, `skew()`, `matrix()`

- `perspective`: Defines the perspective on the 3D space for an element.

Values: Length units (e.g., `500px`)

- `transform-origin`: Defines the origin of a transformation.

Values: `top`, `right`, `center`, `left`, `bottom`, or length (`px`, `%`)

10. Miscellaneous Properties:

- `visibility`: Controls the visibility of an element.
Values: `visible`, `hidden`, `collapse`

- `opacity`: Defines the transparency of an element.

Values: A number between `0` (fully transparent) and `1` (fully opaque)

- `cursor`: Specifies the type of cursor to be displayed when hovering over an

element.
Values: `auto`, `pointer`, `crosshair`, `move`, `text`, `wait`, etc.

- `overflow`: Specifies what happens if content overflows an element's box.

Values: `visible`, `hidden`, `scroll`, `auto`

- `box-shadow`: Adds a shadow effect to an element.

Values: `h-offset v-offset blur-radius spread-radius color` (e.g., `2px 2px 5px
rgba(0, 0, 0, 0.3)`).

TABLE ATTRIBUTES
In CSS, the `<table>` element can be styled using various properties to
control the appearance and layout of tables. These properties are
applied not only to the table itself but also to its various components,
such as the table rows (`<tr>`), cells (`<td>`, `<th>`), and headers
(`<thead>`, `<tbody>`, `<tfoot>`).

Common CSS Properties for Styling Tables

Here’s a breakdown of some of the key CSS properties used to style

tables:

1. Basic Table Properties

These properties apply to the entire table structure.

- `border`: Defines the border for the table.

```css
table {
border: 1px solid black;
}
```

- `border-collapse`: Controls whether the table borders are collapsed

into a single border or remain separate.
- `collapse`: Collapses the borders into a single line.
- `separate`: Keeps the borders separated (default).
```css
table {
border-collapse: collapse;
}
```

- `border-spacing`: Defines the space between cells when

`border-collapse: separate` is used.
```css
table {
border-spacing: 10px;
}
 ```

- `caption-side`: Specifies the position of the table caption (`<caption>`).

- `top` (default): Position the caption above the table.
- `bottom`: Position the caption below the table.
```css
table {
caption-side: top;
}
```

- empty-cells`: Controls whether empty table cells have visible borders.

- `show`: Displays borders for empty cells.
- `hide`: Hides borders for empty cells.
```css
table {
empty-cells: show;
}
```

2. Table Cell Properties

These properties apply to the individual table cells (`<td>` or `<th>`).

- padding`: Adds space inside table cells.

```css
td, th {
padding: 8px;
}
```

- `text-align`: Aligns the text horizontally within cells.

```css
td, th {
text-align: left;
}
```
- `vertical-align`: Aligns content vertically within cells.
```css
td, th {
vertical-align: middle;
}
```

- `background-color`: Sets the background color of the cells.

```css
td, th {
background-color: #f0f0f0;
}
```

- `border`: Adds borders to individual cells.

```css
td, th {
border: 1px solid #ccc;
}
```

3. Table Row Properties

These properties apply to rows (`<tr>`) in the table.

- `background-color`: Sets the background color for a row.

```css
tr:nth-child(even) {
background-color: #f9f9f9;
}
```

- `border`: You can also add borders to rows, although this is less
common than styling cells.
```css
tr {
border-bottom: 1px solid #ccc;
}
 ```

4. Table Header and Footer

You can style the table header (`<thead>`) and footer (`<tfoot>`)
separately.

- `font-weight`: Typically used for table headers to make text bold.

```css
th {
font-weight: bold;
}
```

- background-color`: Sets the background color for the header or

footer.
```css
thead {
background-color: #333;
color: white;
}
```

5. Advanced Styling Techniques

- Zebra Stripes: Using `nth-child()` pseudo-class to alternate row colors.

```css
tr:nth-child(odd) {
background-color: #f2f2f2;
}
tr:nth-child(even) {
background-color: #fff;
}
```

- Hover Effects: Highlight rows or cells on hover.

```css
tr:hover {
 background-color: #d3d3d3;
}
```

- Fixed Header on Scroll: You can make the table header fixed when
scrolling, by combining `position: sticky` and `top` properties.
```css
th {
position: sticky;
top: 0;
background-color: #fff;
z-index: 1;
}
```

Example of a Styled Table

Here is an example of a simple table with some common styling applied:

```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,
initial-scale=1.0">
<title>Styled Table</title>
<style>
table {
width: 100%;
border-collapse: collapse;
margin: 20px 0;
}

th, td {
padding: 12px;
border: 1px solid #ddd;
 text-align: left;
}

th {
background-color: #4CAF50;
color: white;
}

tr:nth-child(even) {
background-color: #f2f2f2;
}

tr:hover {
background-color: #ddd;
}

caption {
font-size: 1.5em;
margin: 10px 0;
}
</style>
</head>
<body>

<table>
<caption>Employee Table</caption>
<thead>
<tr>
<th>Name</th>
<th>Position</th>
<th>Salary</th>
</tr>
</thead>
<tbody>
<tr>
<td>John Doe</td>
<td>Manager</td>
 <td>$100,000</td>
</tr>
<tr>
<td>Jane Smith</td>
<td>Developer</td>
<td>$80,000</td>
</tr>
<tr>
<td>Sam Johnson</td>
<td>Designer</td>
<td>$70,000</td>
</tr>
</tbody>
</table>

</body>
</html>
```

This creates a table with a fixed header, alternating row colors, hover
effects, and padding in the cells.

ROW TAGS
It seems you are asking specifically about row tags in the context of
CSS. The term "row tags" likely refers to the <tr> (table row) element in
HTML. While you cannot directly style the row itself with CSS just by
referring to a "row tag," you can target the <tr> element (table row) with
CSS selectors to style it as needed.

Key CSS Techniques for Styling <tr> (Table Rows)

Here's a comprehensive guide on how to style the <tr> tag (table row)
in CSS:

1. Basic Row Styling

You can directly style <tr> tags to control the background color,
borders, padding, and other visual properties.

css
Copy code
tr {
background-color: #f9f9f9; /* Light gray
background */
border: 1px solid #ddd; /* Border around the
rows */
padding: 10px; /* Padding inside the
row */
}

2. Alternating Row Colors (Zebra Stripes)

You can use the nth-child() pseudo-class to style alternating rows,

commonly referred to as zebra striping.
Example:
css
Copy code
/* Apply a different background to odd rows */
tr:nth-child(odd) {
background-color: #f2f2f2; /* Light gray for odd
rows */
}

/* Apply a white background to even rows */

tr:nth-child(even) {
background-color: #ffffff; /* White for even rows
*/
}

This will alternate the row background color every other row.

3. Hover Effects on Rows

You can add a hover effect that changes the background color of a row
when the user hovers over it.
Example:
css
Copy code
tr:hover {
background-color: #e0e0e0; /* Change to a slightly
darker gray when hovered */
}

This enhances interactivity, making it clear which row the user is

currently focusing on.

4. Styling Specific Rows (First and Last Rows)

You can style the first and last rows using the :first-child and
:last-child pseudo-classes.

Example:
css
Copy code
/* Style the first row */
tr:first-child {
background-color: #4CAF50; /* Green background for
the first row */
color: white; /* White text */
}

/* Style the last row */

tr:last-child {
background-color: #f44336; /* Red background for
the last row */
color: white; /* White text */
}

5. Adding Borders to Rows

You can add borders to table rows, but keep in mind that table cells
(<td> and <th>) usually define the appearance of borders.

Example:
css
Copy code
/* Apply a border to each row */
tr {
border-bottom: 1px solid #ddd;
}

/* Apply a thick border to the first row */

tr:first-child {
 border-top: 3px solid #000;
}

6. Specific Row Styling Using Classes

You can target specific rows by adding classes to <tr> tags and styling
those classes in CSS.
Example:
html
Copy code
<table>
<thead>
<tr>
<th>Name</th>
<th>Position</th>
<th>Salary</th>
</tr>
</thead>
<tbody>
<tr class="highlight">
<td>John Doe</td>
<td>Manager</td>
<td>$100,000</td>
</tr>
<tr>
<td>Jane Smith</td>
<td>Developer</td>
<td>$80,000</td>
</tr>
</tbody>
</table>

css
Copy code
/* Target the row with the class 'highlight' */
tr.highlight {
background-color: #ffeb3b; /* Yellow background
for highlighted row */
font-weight: bold;
}

Example of a Complete Table with CSS Row Styling

html
Copy code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,
initial-scale=1.0">
<title>Styled Table with Row Tags</title>
<style>
table {
width: 100%;
border-collapse: collapse;
}

th, td {
padding: 12px;
text-align: left;
border: 1px solid #ddd;
}

/* Zebra striping (alternating row colors) */

 tr:nth-child(odd) {
background-color: #f9f9f9;
}

tr:nth-child(even) {
background-color: #ffffff;
}

/* Hover effect */
tr:hover {
background-color: #ddd;
}

/* Style the first row */

tr:first-child {
background-color: #4CAF50;
color: white;
}

/* Style the last row */

tr:last-child {
background-color: #f44336;
color: white;
}
</style>
</head>
<body>

<table>
<caption>Employee List</caption>
<thead>
<tr>
 <th>Name</th>
<th>Position</th>
<th>Salary</th>
</tr>
</thead>
<tbody>
<tr>
<td>John Doe</td>
<td>Manager</td>
<td>$100,000</td>
</tr>
<tr>
<td>Jane Smith</td>
<td>Developer</td>
<td>$80,000</td>
</tr>
<tr>
<td>Sam Johnson</td>
<td>Designer</td>
<td>$70,000</td>
</tr>
</tbody>
</table>

</body>
</html>

Key Concepts Recap:

1. Basic Row Styling: Style rows with background colors, borders,

or other visual properties.
 2. Alternating Row Colors: Use :nth-child() to create zebra
striping (alternating row colors).
3. Hover Effects: Use :hover to change row background on mouse
hover.
4. Targeting Specific Rows: Use :first-child, :last-child,
or nth-child() to style specific rows.
5. Classes: Add classes to specific rows and style them individually.

In conclusion, although "row tags" isn't a direct CSS term, you can target
the <tr> (table row) element to apply various styles that enhance the
look and usability of tables. By using CSS selectors like
:nth-child(), :hover, and :first-child, you can customize
table rows in dynamic and interactive ways.

1. Basic Row Styling

You can directly style <tr> tags to control the background color,
borders, padding, and other visual properties.

css
Copy code
tr {
background-color: #f9f9f9; /* Light gray
background */
border: 1px solid #ddd; /* Border around the
rows */
padding: 10px; /* Padding inside the
row */
}

2. Alternating Row Colors (Zebra Stripes)

You can use the nth-child() pseudo-class to style alternating rows,
commonly referred to as zebra striping.
Example:
css
Copy code
/* Apply a different background to odd rows */
tr:nth-child(odd) {
background-color: #f2f2f2; /* Light gray for odd
rows */
}

/* Apply a white background to even rows */

tr:nth-child(even) {
background-color: #ffffff; /* White for even rows
*/
}

This will alternate the row background color every other row.

3. Hover Effects on Rows

You can add a hover effect that changes the background color of a row
when the user hovers over it.
Example:
css
Copy code
tr:hover {
background-color: #e0e0e0; /* Change to a slightly
darker gray when hovered */
}

This enhances interactivity, making it clear which row the user is

currently focusing on.
4. Styling Specific Rows (First and Last Rows)

You can style the first and last rows using the :first-child and
:last-child pseudo-classes.

Example:
css
Copy code
/* Style the first row */
tr:first-child {
background-color: #4CAF50; /* Green background for
the first row */
color: white; /* White text */
}

/* Style the last row */

tr:last-child {
background-color: #f44336; /* Red background for
the last row */
color: white; /* White text */
}

5. Adding Borders to Rows

You can add borders to table rows, but keep in mind that table cells
(<td> and <th>) usually define the appearance of borders.

Example:
css
Copy code
/* Apply a border to each row */
tr {
border-bottom: 1px solid #ddd;
}
/* Apply a thick border to the first row */
tr:first-child {
border-top: 3px solid #000;
}

6. Specific Row Styling Using Classes

You can target specific rows by adding classes to <tr> tags and styling
those classes in CSS.
Example:
html
Copy code
<table>
<thead>
<tr>
<th>Name</th>
<th>Position</th>
<th>Salary</th>
</tr>
</thead>
<tbody>
<tr class="highlight">
<td>John Doe</td>
<td>Manager</td>
<td>$100,000</td>
</tr>
<tr>
<td>Jane Smith</td>
<td>Developer</td>
<td>$80,000</td>
</tr>
</tbody>
</table>
css
Copy code
/* Target the row with the class 'highlight' */
tr.highlight {
background-color: #ffeb3b; /* Yellow background
for highlighted row */
font-weight: bold;
}

Example of a Complete Table with CSS Row Styling

html
Copy code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,
initial-scale=1.0">
<title>Styled Table with Row Tags</title>
<style>
table {
width: 100%;
border-collapse: collapse;
}

th, td {
padding: 12px;
text-align: left;
border: 1px solid #ddd;
}
 /* Zebra striping (alternating row colors) */
tr:nth-child(odd) {
background-color: #f9f9f9;
}

tr:nth-child(even) {
background-color: #ffffff;
}

/* Hover effect */
tr:hover {
background-color: #ddd;
}

/* Style the first row */

tr:first-child {
background-color: #4CAF50;
color: white;
}

/* Style the last row */

tr:last-child {
background-color: #f44336;
color: white;
}
</style>
</head>
<body>

<table>
<caption>Employee List</caption>
<thead>
 <tr>
<th>Name</th>
<th>Position</th>
<th>Salary</th>
</tr>
</thead>
<tbody>
<tr>
<td>John Doe</td>
<td>Manager</td>
<td>$100,000</td>
</tr>
<tr>
<td>Jane Smith</td>
<td>Developer</td>
<td>$80,000</td>
</tr>
<tr>
<td>Sam Johnson</td>
<td>Designer</td>
<td>$70,000</td>
</tr>
</tbody>
</table>

</body>
</html>

Key Concepts Recap:

1. Basic Row Styling: Style rows with background colors, borders,

or other visual properties.
 2. Alternating Row Colors: Use :nth-child() to create zebra
striping (alternating row colors).
3. Hover Effects: Use :hover to change row background on mouse
hover.
4. Targeting Specific Rows: Use :first-child, :last-child,
or nth-child() to style specific rows.
5. Classes: Add classes to specific rows and style them individually.

In conclusion, although "row tags" isn't a direct CSS term, you can target
the <tr> (table row) element to apply various styles that enhance the
look and usability of tables. By using CSS selectors like
:nth-child(), :hover, and :first-child, you can customize
table rows in dynamic and interactive way

COLUMN TAGS

In CSS, the concept of "column tags" isn't a specific term, but when working with
tables in HTML, we commonly style columns using CSS. There are no dedicated
<col> tags in CSS (other than the <col> element itself), but you can apply styles to
entire columns using CSS in a variety of ways.

Understanding the <col> Element

The <col> tag in HTML is used to define column properties for tables. It is typically
used within a <colgroup> to apply styles such as background colors or width to
entire columns. While this is one way to style columns, it's not a tag directly styled by
CSS itself but rather used in conjunction with CSS for column-specific styling.

Here’s a breakdown of how you can style columns in tables using CSS:

1. Using the <col> Element

The <col> element allows you to define the properties of one or more columns in a
table, such as width, background color, etc. It must be used inside a <colgroup>
element.

Example: Basic Column Styling with <col>:

html

Copy code

<table>

<colgroup>

<col style="background-color: #f0f0f0; width: 30%">

<col style="background-color: #e0e0e0; width: 40%">

<col style="background-color: #d0d0d0; width: 30%">

</colgroup>

<thead>

<tr>

<th>Name</th>

<th>Position</th>

<th>Salary</th>

</tr>

</thead>

<tbody>

<tr>

<td>John Doe</td>

<td>Manager</td>

<td>$100,000</td>
 </tr>

<tr>

<td>Jane Smith</td>

<td>Developer</td>

<td>$80,000</td>

</tr>

</tbody>

</table>

Explanation:

● The <colgroup> contains <col> elements that style each column.

● You can set properties like background-color, width, border, etc., for
each column in this way.

2. Using nth-child() to Style Columns

If you prefer not to use the <col> tag, you can target individual columns using the
nth-child() pseudo-class. This method applies to table cells (<td>) in a specific
column.

Example: Targeting Columns Using nth-child()

html

Copy code

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">
 <meta name="viewport" content="width=device-width,
initial-scale=1.0">

<title>Table with Column Styling</title>

<style>

table {

width: 100%;

border-collapse: collapse;

th, td {

padding: 12px;

text-align: left;

border: 1px solid #ddd;

/* Style the first column */

td:nth-child(1), th:nth-child(1) {

background-color: #f9f9f9;

font-weight: bold;

/* Style the second column */

td:nth-child(2), th:nth-child(2) {
 background-color: #f2f2f2;

/* Style the third column */

td:nth-child(3), th:nth-child(3) {

background-color: #e9e9e9;

tr:nth-child(even) {

background-color: #f2f2f2;

tr:hover {

background-color: #ddd;

</style>

</head>

<body>

<table>

<caption>Employee Table</caption>

<thead>

<tr>
 <th>Name</th>

<th>Position</th>

<th>Salary</th>

</tr>

</thead>

<tbody>

<tr>

<td>John Doe</td>

<td>Manager</td>

<td>$100,000</td>

</tr>

<tr>

<td>Jane Smith</td>

<td>Developer</td>

<td>$80,000</td>

</tr>

<tr>

<td>Sam Johnson</td>

<td>Designer</td>

<td>$70,000</td>

</tr>

</tbody>

</table>
</body>

</html>

Explanation:

● :nth-child(1) targets the first column (the "Name" column),

:nth-child(2) targets the second column (the "Position" column), and so
on.
● This method can be particularly useful if you want to apply specific styles (like
background colors, fonts, etc.) to columns without using the <col> element.

3. Using Flexbox or Grid for Advanced Table Layouts

While tables in HTML use rows (<tr>) and columns (<td>) for layout, CSS Grid and
Flexbox can also be used for more complex layouts, especially for table-like
structures. You can apply Grid or Flexbox to control the layout of data in a table-like
structure.

Example: Using CSS Grid for Column Layout

html

Copy code

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width,

initial-scale=1.0">

<title>CSS Grid Table Layout</title>

<style>
 .grid-table {

display: grid;

grid-template-columns: 1fr 2fr 2fr; /* Define 3 columns

*/

gap: 1px; /* Add a small gap between cells */

border: 1px solid #ddd;

.grid-table div {

padding: 10px;

border: 1px solid #ddd;

text-align: left;

.grid-table .header {

background-color: #4CAF50;

color: white;

font-weight: bold;

.grid-table .row:nth-child(even) {

background-color: #f9f9f9;

}
 .grid-table .row:hover {

background-color: #ddd;

</style>

</head>

<body>

<div class="grid-table">

<div class="header">Name</div>

<div class="header">Position</div>

<div class="header">Salary</div>

<div class="row">John Doe</div>

<div class="row">Manager</div>

<div class="row">$100,000</div>

<div class="row">Jane Smith</div>

<div class="row">Developer</div>

<div class="row">$80,000</div>

<div class="row">Sam Johnson</div>

<div class="row">Designer</div>
 <div class="row">$70,000</div>

</div>

</body>

</html>

Explanation:

● CSS Grid is used here to define columns explicitly.

● The grid-template-columns property defines three columns with the
widths of 1fr (for the first column), 2fr (for the second and third columns), and
you can adjust these values for your layout.

Conclusion

Although there isn’t a specific “column tag” in CSS, there are multiple ways to style
columns in HTML tables:

1. Using the <col> element: This method allows you to apply styles directly to
columns.
2. Using the nth-child() pseudo-class: This method applies styles to specific
columns based on their position.
3. Using CSS Grid or Flexbox: These advanced techniques allow you to create
custom layouts similar to table structures but with more flexibility and control.

Each method has its own use case depending on the complexity of your design and
your layout requirements. The most common approaches for traditional table layouts
remain the use of the <col> tag or targeting columns using nth-child().