HTML — Part-3

Eishta Mittal

6 min readMay 7, 2022

HTML tables allow to arrange data into rows and columns.

HTML Table Tags

<table> — Defines a table

<th> — Defines a header cell in a table

<tr> — Defines a row in a table

<td> — Defines a cell in a table

<caption> — Defines a table caption

<colgroup> — Specifies a group of one or more columns in a table for formatting

<col> — Specifies column properties for each column within a <colgroup> element

<thead> — Groups the header content in a table

<tbody> — Groups the body content in a table

<tfoot> — Groups the footer content in a table

<table>
  <tr>
    <th>Person 1</th>
    <th>Person 2</th>
    <th>Person 3</th>
  </tr>
  <tr>
    <td>Emil</td>
    <td>Tobias</td>
    <td>Linus</td>
  </tr>
  <tr>
    <td>16</td>
    <td>14</td>
    <td>10</td>
  </tr>
</table>

How To Add a Border

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

Collapsed Table Borders

To avoid having double borders, set the CSS border-collapse property to collapse.

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

Style Table Borders

table, th, td {
  border: 1px solid white;
  border-collapse: collapse;
}
th, td {
  background-color: #96D4D4;
}

Round Table Borders

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

Skip the border around the table by leaving out `table` from the css selector

th, td {
  border: 1px solid black;
  border-radius: 10px;
}

Border Styles

dotted
dashed
solid
double
groove
ridge
inset
outset
none
hidden

th, td {
  border-style: dotted;
}

Border Color

th, td {
  border-color: #96D4D4;
}

HTML Table Sizes

HTML Table Column Width

<tr>
    <th style="width:70%">Firstname</th>
    <th>Lastname</th>
    <th>Age</th>
  </tr>

HTML Table Row Height

<tr style="height:200px">
    <td>Jill</td>
    <td>Smith</td>
    <td>50</td>
  </tr>

Vertical Table Headers

<table>
  <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>94</td>
    <td>50</td>
  </tr>
</table>

Align Table Headers

th {
  text-align: center;
}

Header for Multiple Columns

<table> 
 <tr>
    <th colspan="2">Name</th>
    <th>Age</th>
  </tr>
  <tr>
    <td>Jill</td>
    <td>Smith</td>
    <td>50</td>
  </tr>
</table>

Table Caption

<table style="width:100%">
  <caption>Monthly savings</caption>
  <tr> ...
  </tr>
  <tr> ...
  </tr>
  <tr> ... 
  </tr>
</table>

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.

th, td {
  padding: 15px;
}

to have differnet padding at 4 sides, you can use the properties: padding-bottom, padding-left, and padding-right

th, td {
  padding-top: 10px;
  padding-bottom: 20px;
  padding-left: 30px;
  padding-right: 40px;
}

HTML Table — Cell Spacing

Cell spacing is the space between each cell.
By default the space is set to 2 pixels.

table {
  border-spacing: 30px;
}

HTML Table Colspan & Rowspan

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

HTML Table — Colspan

i. The first image above is having a colspan = 2 in <th>

<tr>
    <th colspan="2">Name</th>
    <th>Age</th>
</tr>

HTML Table — Rowspan

ii. The second image avove , has rowspan of 3

<table style="width:100%">
  <tr>
    <th rowspan="3">April</th>
    <td>555-1234</td>
    <td>555-1234</td>
  </tr>
  <tr>
    <td>555-8745</td>
    <td>555-1234</td>
  </tr>
  <tr>
    <td>555-8745</td>
    <td>555-1234</td>
  </tr>
  <tr>
    <td>555-8745</td>
    <td>555-8745</td>
    <td>555-1234</td>
  </tr>
    <tr>
    <td>555-8745</td>
    <td>555-8745</td>
    <td>555-1234</td>
  </tr>
</table>

iii. the example has HTML as follows :-

<table style="width:100%">
  <tr>
    <th colspan="3">April</th>
  </tr>
  <tr>
    <td>555-8745</td>
    <td>555-1234</td>
    <td>555-1234</td>
  </tr>
  <tr>
    <td colspan='2' rowspan='2'>555-8745</td>
    <td>555-1234</td>
  </tr>
  <tr>
    <td>555-8745</td>
  </tr>
    <tr>
    <td>555-8745</td>
    <td>555-8745</td>
    <td>555-1234</td>
  </tr>
</table>

HTML Table Styling

Zebra Stripes

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

Vertical Zebra Stripes

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

Combine Vertical and Horizontal Zebra Stripes

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

Horizontal Dividers

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

Hoverable Table

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

HTML Table Colgroup

The <colgroup> element is used to style specific columns of a table.

Each group are specified with a <col> element.
The span attribute specifies how many columns that gets the style.
The style attribute specifies the style to give the columns.

Note: The <colgroup> tag must be a child of a <table> element and should be placed before any other table elements, like <thead>, <tr>, <td> etc., but after the <caption> element

<colgroup>
    <col span="2" style="background-color: #D6EEEE">
  </colgroup>

Multiple Col Elements

<colgroup>
    <col span="2" style="background-color: #D6EEEE">
    <col span="3" style="background-color: pink">
  </colgroup>

Empty Colgroups

Add “empty” col elements that represents the columns before the columns you want to style:

<colgroup>
  <col span="3">
  <col span="2" style="background-color: pink">
</colgroup>

Hide Columns

<colgroup>
    <col span="2">
    <col span="3" style="visibility: collapse">
  </colgroup>

HTML Lists

Unordered HTML List

<ul> tag

<ul>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>

The CSS list-style-type property is used to define the style of the list item marker.

<ul style="list-style-type:disc;">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>

Nested Unordered list

<ul>
  <li>Coffee</li>
  <li>Tea
    <ul style="list-style-type:square;">
      <li>Black tea</li>
      <li>Green tea</li>
    </ul>
  </li>
  <li>Milk</li>
</ul>

Ordered HTML List

<ol> tag.
An ordered list can be numerical or alphabetical.

<ol>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>

The Type Attribute

<ol type="1">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>

Control List Counting

By default, an ordered list will start counting from 1. If you want to start counting from a specified number, you can use the start attribute:

<ol start="50">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>

Nested HTML Lists

<ol>
  <li>Coffee</li>
  <li>Tea
    <ol>
      <li>Black tea</li>
      <li>Green tea</li>
    </ol>
  </li>
  <li>Milk</li>
</ol>

HTML Description Lists

The <dl> tag defines the description list, the <dt> tag defines the term (name), and the <dd> tag describes each term.

<dl>
  <dt>Coffee</dt>
  <dd>- black hot drink</dd>
  <dt>Milk</dt>
  <dd>- white cold drink</dd>
</dl>

Sources: -

https://www.w3schools.com/html