Saturday, October 14, 2023

HTML Table Padding & Spacing

HTML Table Padding & Spacing

HTML tables can adjust the padding inside the cells, and also the space between the cells.

HTML Table — Cell Padding

Cell padding is the space between the cell edges and the cell content.

By default the padding is set to 0.

To add padding on table cells, use the CSS padding property:

Example

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

<h2>Cellpadding</h2>
<p>Cell padding specifies the space between the cell content and its borders.</p>

<table style="width:100%">
  <tr>
    <th>Firstname</th>
    <th>Lastname</th> 
    <th>Rollno</th>
  </tr>
  <tr>
    <td>Jill</td>
    <td>Smith</td>
    <td>1</td>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td>
    <td>2</td>
  </tr>
  <tr>
    <td>John</td>
    <td>Doe</td>
    <td>3</td>
  </tr>
</table>

<p><strong>Tip:</strong> Try to change the padding to 5px.</p>

</body>
</html>

To add padding only above the content, use the padding-top property.

And the others sides with the padding-bottom, padding-left, and padding-right properties:

Example

<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
  border: 1px solid black;
  border-collapse: collapse;
}
th, td {
  padding-top: 10px;
  padding-bottom: 20px;
  padding-left: 30px;
  padding-right: 40px;
}
</style>
</head>
<body>

<h2>Cellpadding - top - bottom - left - right </h2>
<p>We can specify different padding for all fours sides of the cell content.</p>

<table style="width:100%">
  <tr>
    <th>Firstname</th>
    <th>Lastname</th> 
    <th>Rollno</th>
  </tr>
  <tr>
    <td>Jill</td>
    <td>Smith</td>
    <td>1</td>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td>
    <td>2</td>
  </tr>
  <tr>
    <td>John</td>
    <td>Doe</td>
    <td>3</td>
  </tr>
</table>

</body>
</html>

HTML Table — Cell Spacing

Cell spacing is the space between each cell.

By default the space is set to 2 pixels.

To change the space between table cells, use the CSS border-spacing property on the table element:

Example

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

<h2>Cellspacing</h2>
<p>Change the space between the cells with the border-spacing property.</p>

<table style="width:100%">
  <tr>
    <th>Firstname</th>
    <th>Lastname</th> 
    <th>Rollno</th>
  </tr>
  <tr>
    <td>Jill</td>
    <td>Smith</td>
    <td>1</td>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td>
    <td>2</td>
  </tr>
  <tr>
    <td>John</td>
    <td>Doe</td>
    <td>3</td>
  </tr>
</table>

</body>
</html>
at No comments:

Friday, October 13, 2023

HTML Table Headers

                     HTML Table Headers

HTML tables can have headers for each column or row, or for many columns/rows.

HTML Table Headers

Table headers are defined with th elements. Each th element represents a table cell.

Example

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

<h2>Table Headers</h2>

<p>Use the TH element to define table headers.</p>

<table style="width:100%">
  <tr>
    <th>Firstname</th>
    <th>Lastname</th>
    <th>Rollno</th>
  </tr>
  <tr>
    <td>Jill</td>
    <td>Smith</td>
    <td>1</td>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td>
    <td>2</td>
  </tr>
</table>

</body>
</html>

Vertical Table Headers

To use the first column as table headers, define the first cell in each row as a <th> element:

Example

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

<h2>Vertical Table Headers</h2>

<p>The first column becomes table headers if you set the first table cell in each table row to a TH element:</p>

<table style="width:100%">
  <tr>
    <th>Firstname</th>
    <td>Jill</td>
    <td>Eve</td>
  </tr>
  <tr>
    <th>Lastname</th>
    <td>Smith</td>
    <td>Jackson</td>
  </tr>
  <tr>
    <th>Age</th>  
    <td>50</td>
    <td>94</td>
  </tr>
</table>

</body>
</html>

Align Table Headers

By default, table headers are bold and centered:

To left-align the table headers, use the CSS text-align property:

Example

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

<h2>Left-align Headers</h2>

<p>To left-align the table headers, use the CSS text-align property.</p>

<table style="width:100%">
  <tr>
    <th>Firstname</th>
    <th>Lastname</th>
    <th>Age</th>
  </tr>
  <tr>
    <td>Jill</td>
    <td>Smith</td>
    <td>1</td>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td>
    <td>2</td>
  </tr>
</table>

</body>
</html>

Header for Multiple Columns

You can have a header that spans over two or more columns.

To do this, use the colspan attribute on the <th> element:

Example

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

<h2>A header that spans two columns</h2>

<p>Use the colspan attribute to have a header span over multiple columns.</p>

<table style="width:100%">
  <tr>
    <th colspan="2">Name</th>
    <th>Rollno</th>
  </tr>
  <tr>
    <td>Jill</td>
    <td>Smith</td>
    <td>1</td>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td>
    <td>2</td>
  </tr>
</table>
</body>
</html>

Table Caption

You can add a caption that serves as a heading for the entire table.

To add a caption to a table, use the <caption> tag:

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>Table Caption</h2>
<p>To add a caption to a table, use the caption tag.</p>

<table style="width:100%">
  <caption>Monthly savings</caption>
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>January</td>
    <td>RS100</td>
  </tr>
  <tr>
    <td>February</td>
    <td>Rs50</td>
  </tr>
</table>

</body>
</html>
at No comments:
Subscribe to: Posts (Atom)

Building Static Website(part6) HTML Lists

  Building Static Website (part6) HTML Lists Today, let us add some lists to our detailed view section by using html lists. Lists: List is a...

  • Advantages and disadvantages of MySQL
                 MySQL Advantages and                     Disadvantages Advantages: L ike other relational database system, MySQL database serve...
  • HTML Text Formatting
                               HTML Text Formatting HTML contains several elements for defining text with a special meaning. HTML Formatting Ele...
  • HTML Table Colspan & Rowspan
      HTML Table Colspan & Rowspan HTML tables can have cells that span over multiple rows and/or columns. HTML Table — Colspan To make a ce...