Learn CSS (Tutorial 10)

Опубликовано: 21 Март 2025
на канале: WEBoLOGY. in

Presented by: Aakash Biswas

Duration: 18.57 minutes

Watch Tutorial 1:    • Learn CSS (Tutorial 1)
Watch Tutorial 2:    • Learn CSS (Tutorial 2)
Watch Tutorial 3:    • Learn CSS (Tutorial 3)
Watch Tutorial 4:    • Learn CSS (Tutorial 4)
Watch Tutorial 5:    • Learn CSS (Tutorial 5)
Watch Tutorial 6:    • Learn CSS (Tutorial 6)
Watch Tutorial 7:    • Learn CSS (Tutorial 7)
Watch Tutorial 8:    • Learn CSS (Tutorial 8)
Watch Tutorial 9:    • Learn CSS (Tutorial 9)

Collapse Table Borders
The border-collapse property lets the table borders be collapsed into a single border or not.

Table Width and Height
Width and height of a table are defined by the width and height properties.

Horizontal Alignment
The text-align property sets the horizontal alignment like left, right, or center of the content in th or td.
By default, the content of th elements are center-aligned and the content of td elements are left-aligned.

Vertical Alignment

The vertical-align property sets the vertical alignment like top, bottom, or middle of the content in th or td.
By default, the vertical alignment of the content in a table is middle for both th and td elements.

Table Padding
To control the space between the border and the content in a table, you can use the padding property on td and th elements.

Horizontal Dividers
You can add the border-bottom property to th and td for horizontal dividers

Hoverable Table
You can Use the :hover selector on tr to highlight table rows on mouse over:

Striped Tables
You can make zebra-striped tables. You have to use the nth-child() selector and add a background-color to all even (or odd) table rows.

Responsive Table
A responsive table will display a horizontal scroll bar if the screen is too small to display the full content.