Example

Add a border to a table:

Collapse in Table Borders:

The border-collapse property sets whether the table borders should be collapsed into a single border:

Example:

Student Name

Study Program

Inaam ul haq

Web Developer

Qadeer

BSIT

table { border-collapse: collapse;}

table, th, td { border: 1px solid black;}

Table Width and Height:

Width and height of a table are characterized by the width and tallness properties. The case beneath sets the width of the table to 100%, and the height of the <th> components to 50px:

table { width: 100%;}

th { height: 50px;}

Horizontal Alignment:

The text-aligh property sets the set the horizontal alignment (like left, right, or focus) of the substance in <th> or <td>. Of course, the substance of <th> components are center-aligned and the substance of <td> components are left-aligned. The Following example left-aligns the content in <th> components:

th { text-align: left;}

Vertical Alignment:

The vertical-align property sets the vertical alignment (like best, base, or center) of the substance in <th> or <td>. As a matter of course, the vertical alignment of the substance in a table is center (for both <th> and <td> components). The following example sets the vertical text alignment to bottom for <td> components:

td { height: 50px; vertical-align: bottom;}

Responsive Table:

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

Add a container element (like <div>) with overflow-x:auto around the <table> element to make it responsive:

<div style=”overflow-x:auto;”>

<table>… table content …</table>

</div>

Table Color:

The example below specifies the background color and text color of <th> elements:

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

Hoverable Table:

Utilize the :hover selector on <tr> to feature table lines on mouse over: