Thursday, October 12, 2023

HTML Table Sizes

                            HTML Table Sizes

HTML tables can have different sizes for each column, row or the entire table.

Use the style attribute with the width or height properties to specify the size of a table, row or column.

HTML Table Width

To set the width of a table, add the style attribute to the <table> element:

Example

Set the width of the table to 100%:

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

<body>

<h2>100% wide HTML Table</h2>

<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 Column Width

To set the size of a specific column, add the style attribute on a <th> or <td> element:

Example

Set the width of the first column to 70%:

HTML Table Row Height

To set the height of a specific row, add the style attribute on a table row element:

Example

Set the height of the second row to 200 pixels:

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

<h2>Set the height of the second row to 200 pixels</h2>

<table style="width:100%">
  <tr>
    <th>Firstname</th>
    <th>Lastname</th> 
    <th>Rollno</th>
  </tr>
  <tr style="height:200px">
    <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:

Wednesday, October 11, 2023

HTML Table Borders

                         HTML Table Borders

HTML tables can have borders of different styles and shapes.

How To Add a Border

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

Example

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

<h2>Table With Border</h2>

<p>Use the CSS border property to add a border to the table.</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>

Collapsed Table Borders

To avoid having double borders like in the example above, set the CSS border-collapse property to collapse.

This will make the borders collapse into a single border:

Example

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

<h2>Collapsed Borders</h2>
<p>If you want the borders to collapse into one border, add the CSS border-collapse 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>

Style Table Borders

If you set a background color of each cell, and give the border a white color (the same as the document background), you get the impression of an invisible border:

<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
  border: 1px solid white;
  border-collapse: collapse;
}
th, td {
  background-color: #96D4D4;
}
</style>
</head>
<body>

<h2>Table With Invisible Borders</h2>

<p>Style the table with white borders and a background color of the cells to make the impression of invisible 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>

</body>
</html>

Dotted Table Borders

With the border-style property, you can set the appearance of the border.

The following values are allowed:

  • dotted
  • dashed
  • solid
  • double
  • groove
  • ridge
  • inset
  • outset
  • none
  • hidden

Example

<!DOCTYPE html>
<html>
<head>
<style>
th, td {
  border-style: dotted;
}
</style>
</head>
<body>

<h2>Table With Dotted Borders</h2>

<p>Use the CSS border-style property to set the style of the borders.</p>

<table style="width:100%">
  <tr>
    <th>Firstname</th>
    <th>Lastname</th> 
    <th>Age</th>
  </tr>
  <tr>
    <td>Jill</td>
    <td>Smith</td>
    <td>50</td>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td>
    <td>94</td>
  </tr>
  <tr>
    <td>John</td>
    <td>Doe</td>
    <td>80</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...

  • 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...
  • 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...