Research/HTML

HTML_tables

RIEM 2023. 5. 2. 18:56



HTML Tables

HTML tables allow web developers to arrange data into rows and columns.

 

<table>
  <tr>
 <th>Company</th>
 <th>Contact</th>
 <th>Country</th>
  <tr>
  <tr>
 <td>Alfreds Futterkiste</td>
 <td>Maria Anders</td>
 <td>Germany</td>
  </tr>
  <tr>
 <td>Centro comcial Moctezuma</td>
 <td>Francisco Chang</td>
 <td>Mexico</td>
  </tr>
</table>

 



<!DOCTYPE html>
<html>
<head>
  <title>My Page Title</title>
  <link rel="icon" type="image/x-icon" href="favicon.ico">
</head>

<style>
table {
  font-faily: sans-serif;
  border-collapse: collapse;
  width: 100%;
}

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

tr:nth-child(even) {
  background-color: #dddddd;
}
</style>

<body>

<table>
  <tr>
 <th>Company</th>
 <th>Contact</th>
 <th>Country</th>
  <tr>
  <tr>
 <td>Alfreds Futterkiste</td>
 <td>Maria Anders</td>
 <td>Germany</td>
  </tr>
  <tr>
 <td>Centro comcial Moctezuma</td>
 <td>Francisco Chang</td>
 <td>Mexico</td>
  </tr>
</table>


</body>
</html>

 

 

Table Cells

Each table cell is defined by a <td> and a </td> tag. td stands for table data. tr stands for table row. th stands for table head.

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

<h2>TD elements define table cells</h2>

<table style="width:100%">
  <tr>
    <td>Emil</td>
    <td>Tobias</td>
    <td>Linus</td>
  </tr>
</table>

<p>To undestand the example better, we have added borders to the table.</p>

</body>
</html>

 

HTML Table Borders

HTML tables can have borders of different styles and shapes.

 

How To Add a Border

When you add a border to a table, you also add borders around each table cell:

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

 

<!DOCTYPE html>
<html>
<style>
table, th, td {
  border: 1px solid black;
}
</style>
<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>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>

 

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 into a single border.

 

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

 

 

 

Style Table Borders

If you set a background color of each cell, and give the border with a transparent color, you can try this.

<style>
table, th, td {
  border: 1px solid white;
  border-collapse: collapse;
}

th, td {
  background-color: tomato;
}

</style>

 

 

 

Round Table Borders

With the border-radius property, the borders get rounded corners:

<style>
table, th, td {
  border: 1px solid white;
  border-radius: 7px;
}

th, td {
  background-color: tomato;
}

 

Looks cute.

 

Dotted Table Borders

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

 

 

<style>
table, th, td {
  border: 4px solid green;
  border-radius: 7px;
  border-style: dotted;
}

th, td {
  background-color: tomato;
}
</style>

 

Let’s go dotted.

 

Border Color

You can set the color of the border with the border-color property.

<style>
table, th, td {
  border: 4px solid green;
  border-radius: 7px;
  border-style: dotted;
  border-color: brown;
}

th, td {
  background-color: tomato;
}
</style>

 

 

HTML Table Sizes

HTML tables have a variety of 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:

 

<table style="width:100%">
  <tr>
 <th>First Name</th>
 <th>Last Name</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>
</table>

HTML Table Column Width

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

 

<table style="width:100%">
  <tr>
 <th>Firstname</th>
 <th style="width:70%">Last Name</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>
</table>

HTML Table Row Height

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

<table style="width:100%">
  <tr>
 <th>FirstName</th>
 <th>LastName</th>
 <th>Age</th>
  </tr>
  <tr style="height:100px">
 <td>Jills</td>
 <td>Smith</td>
 <td>50</td>
  </tr>
  <tr>
 <td>Eve</td>
 <td>Jackson</td>
 <td>94</td>
  <tr>
</table>

 

HTML Table Headers

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

 

Vertical Table Headers

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

<table>
  <tr>
 <th style="width:200px">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>94</td>
 <td>50</td>
  </tr>
</table>



Align Table Headers

By default, table headers are bold and centered. It looks ugly. Let’s put words to the left side.

th {
  text-align: left;
}

 

Header for Multiple Columns

You can have a header that spans over two or more columns. You can use the colspan attribute on the <th> element:

<table>
  <tr>
 <th colspan="2" style="width:90%">FirstName</th>
 <td>Jill</td>
  </tr>
  <tr>
 <th>LastName</th>
 <td>Smith</td>
 <td>Jackson</td>
  </tr>
  <tr>
 <th>Age</th>
 <td>94</td>
 <td>50</td>
  </tr>
</table>

 

Table Caption

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

<table style="width:90%">
  <caption>Monthly savings</caption>
  <tr>
 <th>Month</th>
 <th>Savings</th>
  </tr>
  <tr>
 <td>January</td>
 <td>$100</td>
  </tr>
  <tr>
 <td>Februrary</td>
 <td>$50</td>
  </tr>
</table>

 

HTML Table Padding & Spacing

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

(w3cshools)

 

HTML Table - Cell Padding

In definition, 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:

 

th, td {
  border: 1px solid;
  padding: 30px;
}

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:


In case of adding padding to top

th, td {
  border: 1px solid;
  padding-bottom: 20px;
}


In case of adding padding to all direction

th, td {
  border: 1px solid;
  padding-top: 100px;
  padding-bottom: 20px;
  padding-left: 10px;
  padding-right: 20px;
}

 



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:

 

table, th, tr {
  border: 1px solid;
  border-spacing: 100px;
}

 

HTML Table Colspan & Rowspan

HTML tables can have cells that spans over multiple rows and/or columns.

 

HTML Table - Colspan

To make a cell span over multiple columns, use the colspan attribute:

 

<table style="width:90%">
  <caption>Monthly savings</caption>
  <tr>
 <th colspan="2">Month/Money</th>
  </tr>
  <tr>
 <td>January</td>
 <td>$100</td>
  </tr>
  <tr>
 <td>Februrary</td>
 <td>$50</td>
  </tr>
</table>

 

 

HTML Table - Rowspan

To make a cell span over multiple rows, use the rowspan attribute:

<table style="width:90%">
  <caption>Monthly savings</caption>
  <tr>
 <th>Month</th>
 <th>Money</th>
  </tr>
  <tr>
 <th rowspan="2">January</td>
 <td>$100</td>
  </tr>
  <tr>
 <td>Februrary</td>
  </tr>
</table>

 

HTML Table Styling

Use CSS to make your tables look better.

 

HTML Table - Zebra Stripes

If you add a background color on every other table row, you will get a nice zebra stripes effect like below.

To style every other table row element, use the :nth-child(even) selector like this:

 

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

 

 

 

HTML Table - Vertical Zebra Stripes

To make vertical zebra stripes, style every other column, instead of every other row.

td:nth-child(even), th:nth-child(even) {
  background-color: #D6EEEE;
}

 

Combine Vertical and Horizontal Zebra Stripes

It is possible to combine the styling from the two examples above and you will have stripes on every other row and every other column. You can use a transparent color for an overlapping effect.

 

In W3S, they used rgba() color system to specify the transparency of the color:

 

tr:nth-child(even) {
  background-color: rgba(150, 212, 212, 0.2);
}

td:nth-child(even), th:nth-child(even) {
  background-color: rgba(150, 212, 212, 0.2);
}

 

Horizontal Dividers

If you put borders at the bottom of each table row, you will have a table with horizontal dividers. Add the border-bottom property to all tr elements to get horizontal dividers:


Adding the border-bottom property to all tr elements

table {
  border-collapse: collapse;
}
tr {
  border-bottom: 1px solid #ddd;
}

 

 

Hoverable Table

Use the :hover selector on tr to highlight table rows on mouse over:

 

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

 

Awesome! I like this one.

 

HTML Table Colgroup

HTML Table Colgroup

You can use <colgroup> and <col> elements to stylize the two first columns of a table like below.

<colgroup> element is for a container for the column specifications. Each group are specified with a <col> element. The span attribute specifies how many columns you would stylize. The style attribute specifies the style to give the columns.

 

<TABLE>

 

<colgroup>

  <col span="2" style="background-color: tomato">

</colgroup>

<tr>

  <th>Mon</th>

  <th>Tue</th>

  <th>Wed</th>

  <th>Thur</th>

  <th>Fri</th>

  <th>Sat</th>

  <th>Sun</th>

</tr>

<tr>

  <td>hello</td>

  <td>hello</td>

  <td>hello</td>

  <td>hello</td>

  <td>hello</td>

  <td>hello</td>

  <td>hello</td>

</tr>

 

</TABLE>



Here we are. First two columns are in tomato color.

 

Legal CSS Properties

In colgroup, there are only a few CSS properties which are allowed to use.

 

  • Width property
  • Visibility property
  • Background property
  • Border property

Those do not affect on tables.

 

Multiple Col Elements

If you want multiple styles on different columns, you can use additional <col> elements inside the <colgroup> element.

<TABLE>

 

<colgroup>

  <col span="2" style="background-color: tomato">

  <col span="3" style="background-color: blue">

</colgroup>

<tr>

  <th>Mon</th>

  <th>Tue</th>

  <th>Wed</th>

  <th>Thur</th>

  <th>Fri</th>

  <th>Sat</th>

  <th>Sun</th>

</tr>

<tr>

  <td>hello</td>

  <td>hello</td>

  <td>hello</td>

  <td>hello</td>

  <td>hello</td>

  <td>hello</td>

  <td>hello</td>

</tr>

 

</TABLE>

 

It is like stacking colors on columns in order.

 

Empty Colgroups

What If I want to color the columns which is in the middle of columns like Wed, Thurs? Well, you know this is stacking system so basically you are using this one. So you stack empty columns first and stack colors after those.

 

<colgroup>

  <col span="2">

  <col span="3" style="background-color: blue">

</colgroup>

 

 

 

Hide Columns

Ok. We know how to stack empty columns. What if we want to hide columns? I don’t know why we need but sometimes you need a place to hide :) 

 

<colgroup>

  <col span="2">

  <col span="3" style="visibility:collapse">

</colgroup>

 

 

Now, you don’t see Wed, Thur, Fri’s columns due to collapse parameter.


저작자표시