DEV Community

Cover image for Concepts of HTML and CSS (tables and border-collapse)
Kamalesh AR
Kamalesh AR

Posted on

Concepts of HTML and CSS (tables and border-collapse)

#ai #webdev #html #css

What is table in html?

  • HTML tables help organize data into rows and columns, making information easy to read and compare. For example, They are useful for displaying schedules, price lists, product details, and more.
  • Can include text, images, links, and other elements.
  • Allow clear presentation of data for comparison.
  • Can be styled with CSS for better design and readability.
  • HTML tables allow web developers to arrange data into rows and columns.
  • This article gets you started with HTML tables, covering the very basics such as rows, cells, headings, making cells span multiple columns and rows, and how to group together all the cells in a column for styling purposes.

Sample code: 

<!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>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 comercial Moctezuma</td>
    <td>Francisco Chang</td>
    <td>Mexico</td>
  </tr>
  <tr>
    <td>Ernst Handel</td>
    <td>Roland Mendel</td>
    <td>Austria</td>
  </tr>
  <tr>
    <td>Island Trading</td>
    <td>Helen Bennett</td>
    <td>UK</td>
  </tr>
  <tr>
    <td>Laughing Bacchus Winecellars</td>
    <td>Yoshi Tannamuri</td>
    <td>Canada</td>
  </tr>
  <tr>
    <td>Magazzini Alimentari Riuniti</td>
    <td>Giovanni Rovelli</td>
    <td>Italy</td>
  </tr>
</table>

</body>
</html>
Enter fullscreen mode Exit fullscreen mode

What is border collapse?

  • The border-collapse CSS property sets whether cells inside a table have shared or separate borders.
  • When cells are collapsed, the border-style value of inset behaves like ridge, and outset behaves like groove.
  • When cells are separated, the distance between cells is defined by the border-spacing property.
  • The border-collapse property sets whether table borders should collapse into a single border or be separated as in standard HTML.

Sample code: 

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

#table1 {
  border-collapse: separate;
}

#table2 {
  border-collapse: collapse;
}
</style>
</head>
<body>

<h2>border-collapse: separate (default):</h2>
<table id="table1">
  <tr>
    <th>Firstname</th>
    <th>Lastname</th>
  </tr>
  <tr>
    <td>Peter</td>
    <td>Griffin</td>
  </tr>
  <tr>
    <td>Lois</td>
    <td>Griffin</td>
  </tr>
</table>

<h2>border-collapse: collapse:</h2>
<table id="table2">
  <tr>
    <th>Firstname</th>
    <th>Lastname</th>
  </tr>
  <tr>
    <td>Peter</td>
    <td>Griffin</td>
  </tr>
  <tr>
    <td>Lois</td>
    <td>Griffin</td>
  </tr>
</table>

</body>
</html>
Enter fullscreen mode Exit fullscreen mode

Refernces
Border-collapse:
https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/border-collapse
https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/border-collapse

Table:
https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/HTML_table_basics
https://www.geeksforgeeks.org/html/html-tables/
https://www.w3schools.com/html/html_tables.asp

Top comments (0)