Tables in HTML

HTML

Preface

Tables in HTML that allow the develop web to organize data into rows and columns.

For example the following table:

<!--
Cafedev.vn - Kênh thông tin IT hàng đầu Việt Nam
@author cafedevn
Contact: [email protected]
Fanpage: https://www.facebook.com/cafedevn
Group: https://www.facebook.com/groups/cafedev.vn/
Instagram: https://instagram.com/cafedevn
Twitter: https://twitter.com/CafedeVn
Linkedin: https://www.linkedin.com/in/cafe-dev-407054199/
Pinterest: https://www.pinterest.com/cafedevvn/
YouTube: https://www.youtube.com/channel/UCE7zpY_SlHGEgo67pHxqIoA/
-->

<!DOCTYPE html>
<html>
<head>
<style>
table {
  font-family: arial, sans-serif;
  border-collapse: collapse;
  width: 100%;
}

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

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

<h2>HTML Table</h2>

<table>
  <tr>
    <th>STT</th>
    <th>Tỉnh</th>
    <th>Số Lượng</th>
  </tr>
  <tr>
    <td>1</td>
    <td>HCM</td>
    <td>3</td>
  </tr>
  <tr>
    <td>2</td>
    <td>HN</td>
    <td>38</td>
  </tr>
  <tr>
    <td>3</td>
    <td>Đà Nẵng</td>
    <td>80</td>
  </tr>
  <tr>
    <td>4</td>
    <td>Tiền Giang</td>
    <td>89</td>
  </tr>
  <tr>
    <td>5</td>
    <td>Tây Giang</td>
    <td>45</td>
  </tr>
  <tr>
    <td>6</td>
    <td>Hà Giang</td>
    <td>66</td>
  </tr>
</table>

</body>
</html>

Copy and run the code

1. Create tables in HTML

Card <table> used to create tables in HTML.

Each row in the table is identified by a tag <tr>. Each table header is identified by tag <th>. Each data / table cell is identified by cards <td>.

By default, the text in the elements <th> are bolded and centered.

By default, the text in the elements <td> is normal and left-aligned.

 <table style="width:100%">
  <tr>
    <th>Firstname</th>
    <th>Lastname</th>
    <th>Age</th>
  </tr>
  <tr>
    <td>Jill</td>
    <td>Xuan</td>
    <td>60</td>
  </tr>
  <tr>
    <td>Eve</td>
    <td>David</td>
    <td>100</td>
  </tr>
</table> 

Copy and run the code

Note: Elements <td> are the data containers of the table.
They can contain all types of HTML elements; text, images, lists, other tables, etc.

2. Table with border (border)

To add a border to the table, use properties border in CSS:

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

For 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>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>

Copy and run the code

3. Table with reduced border

To make the borders collapse to a border, add properties border-collapse in CSS:

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

For 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>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>

Copy and run the code

4. Table with Padding per Cell

Padding each cell specifies the space between the cell content and its border.

If you do not specify Padding, the table cells will be displayed without padding.

To set the padding, use the section property padding CSS:

<!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>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>

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

</body>
</html>

Copy and run the code

5. Table with Left-align Headings, Border Spacing,

By default, table headers are bold and centered.

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

th {
  text-align: left;
}

Border spacing specifies the distance between cells.

To set border spacing for the table, use properties border-spacing CSS:

table {
  border-spacing: 5px;
}

For example:

<!--
Cafedev.vn - Kênh thông tin IT hàng đầu Việt Nam
@author cafedevn
Contact: [email protected]
Fanpage: https://www.facebook.com/cafedevn
Group: https://www.facebook.com/groups/cafedev.vn/
Instagram: https://instagram.com/cafedevn
Twitter: https://twitter.com/CafedeVn
Linkedin: https://www.linkedin.com/in/cafe-dev-407054199/
Pinterest: https://www.pinterest.com/cafedevvn/
YouTube: https://www.youtube.com/channel/UCE7zpY_SlHGEgo67pHxqIoA/
-->

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

<h2>Border Spacing + Text Align</h2>
<p>Theo mặc định, các tiêu đề bảng được in đậm và chính giữa.</p>
<p>Khoảng cách viền chỉ định khoảng cách giữa các ô.</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>

6. Table with span (span) many columns and many rows

To create a range of cells with more than one column, use properties colspan:

<!--
Cafedev.vn - Kênh thông tin IT hàng đầu Việt Nam
@author cafedevn
Contact: [email protected]
Fanpage: https://www.facebook.com/cafedevn
Group: https://www.facebook.com/groups/cafedev.vn/
Instagram: https://instagram.com/cafedevn
Twitter: https://twitter.com/CafedeVn
Linkedin: https://www.linkedin.com/in/cafe-dev-407054199/
Pinterest: https://www.pinterest.com/cafedevvn/
YouTube: https://www.youtube.com/channel/UCE7zpY_SlHGEgo67pHxqIoA/
-->

<!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>Một cell kéo dài 2 cột</h2>
<p>Để kéo dài bao nhiêu cột thì đổi giá trị colspan </p>

<table style="width:100%">
  <tr>
    <th>Name</th>
    <th colspan="3">Telephone</th>
  </tr>
  <tr>
    <td>David Xuan</td>
    <td>55577854</td>
    <td>55577855</td>
  </tr>
</table>

</body>
</html>

To create a cell that spans more than one row, use properties rowspan:

<!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>Một Cell kéo dài trong 2 dòng</h2>
<p>Thay đổi giá trị rowspan để một ô kéo dài nhiều dòng</p>

<table style="width:100%">
  <tr>
    <th>Name:</th>
    <td>Bill Gates</td>
  </tr>
  <tr>
    <th rowspan="2">Telephone:</th>
    <td>55577854</td>
  </tr>
  <tr>
    <td>55577855</td>
  </tr>
</table>

</body>
</html>

7. Table with Comments – Style a table

  • Add comments to the table

To add comments to the table, use tags <caption>:

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

Note: Card <caption> must be inserted immediately after the tag <table>.

  • Style a table

To define a special style for a particular table, add an id attribute to the table:

 <table id="t01">
  <tr>
    <th>Firstname</th>
    <th>Lastname</th>
    <th>Age</th>
  </tr>
  <tr>
    <td>David</td>
    <td>Xuan</td>
    <td>94</td>
  </tr>
</table> 

Now you can define a special type for this table:

#t01 {
  width: 100%;
  background-color: #f1f1c1;
}
#t01 tr:nth-child(even) {
  background-color: #eee;
}
#t01 tr:nth-child(odd) {
  background-color: #fff;
}
#t01 th {
  color: white;
  background-color: black;
}

Hope this helps!

Source link

Leave a Reply

Your email address will not be published. Required fields are marked *