HTML Tables

HTML tables enable site developers to display information in tabular format like rows and columns.

Example

BookID	BookName	BookPrice
1	Easy Oracle PL/SQL Programming	195
2	Professional MySql	150

It is also used for table style, syntax, template, generator, table elements and example, table css, table tag attributes and list, table tag questions and use, table element center, table element width, table element vertical alignment

Define an HTML Table

A HTML table is defined by the table element.

A tr tag is used for each table row. A th element is used for each table header. The td tag is defined for every data/cell table.

The text is bold and centralised by default in th elements.

The td elements text is regular and left-aligned by default.

Example

A simple HTML table:

<table style="border:0">
    <tr>
        <th>BookID</th>
        <th>BookName</th>
        <th>BookPrice</th>
    </tr>
    <tr>
        <td>1</td>
        <td>Easy Oracle PL/SQL Programming</td>
        <td>195</td>
    </tr>
    <tr>
        <td>2</td>
        <td>Professional MySql</td>
        <td>150</td>
    </tr>
</table>

Note: The components of td are the table data containers. You may have HTML-based components of any kind: text, photos, lists, tables, etc.

It is also used for set and create a dynamic table, which html tag is used to define a table, table size, header and width, define table cell width, table font size

HTML Table - Add a Border

Use the HTML or CSS border property to add a border to a table:

Example

<table border="1">
  <tr>
        <th>BookID</th>
        <th>BookName</th>
        <th>BookPrice</th>
    </tr>
    <tr>
        <td>1</td>
        <td>Easy Oracle PL/SQL Programming</td>
        <td>195</td>
    </tr>
    <tr>
        <td>2</td>
        <td>Professional MySql</td>
        <td>150</td>
    </tr>
</table>

Recall defining both table and table cell boundaries.

It is also used for table border color, table border style without css, table border thickness and attribute, table add border to all cells and between cells, between columns, between rows, table add border lines, html code to add table border

HTML Table - Collapsed Borders

Add the CSS border-collapse attribute to have the borders collapse into a single border:

Example

<table style="border: 1px solid black;border-collapse: collapse">
  <tr>
        <th>BookID</th>
        <th>BookName</th>
        <th>BookPrice</th>
    </tr>
    <tr>
        <td>1</td>
        <td>Easy Oracle PL/SQL Programming</td>
        <td>195</td>
    </tr>
    <tr>
        <td>2</td>
        <td>Professional MySql</td>
        <td>150</td>
    </tr>
</table>

It is also used for table border collapse without css, table border collapse attribute, radius, inline, color, spacing, padding, nested table border collapse

HTML Table - Add Cell Padding

Cell padding indicates the blank space between the contents and their boundaries.

If a padding is not specified, table cells without a padding will appear.

Use the CSS padding property or use HTML cellpadding attribute to set the padding:

Example

<table border="1" cellpadding="10px">
  <tr>
        <th>BookID</th>
        <th>BookName</th>
        <th>BookPrice</th>
    </tr>
    <tr>
        <td>1</td>
        <td>Easy Oracle PL/SQL Programming</td>
        <td>195</td>
    </tr>
    <tr>
        <td>2</td>
        <td>Professional MySql</td>
        <td>150</td>
    </tr>
</table>

It is also used for cell padding and cellspacing in html, table padding-left, add cell padding to table and td in html

HTML Table - Add Cell Spacing

The space between the cells or columns is defined by the border spacing.

Use the CSS border-spacing property or use HTML cellspacing attribute to set the boundary distance of a table:

Example

<table border="1" cellspacing="10px">
  <tr>
        <th>BookID</th>
        <th>BookName</th>
        <th>BookPrice</th>
    </tr>
    <tr>
        <td>1</td>
        <td>Easy Oracle PL/SQL Programming</td>
        <td>195</td>
    </tr>
    <tr>
        <td>2</td>
        <td>Professional MySql</td>
        <td>150</td>
    </tr>
</table>

Note: Border-spacing has no impact if the table has collapsed borders.

It is also used for table border space between cells, table space between text and border, table border no space between cells, how to remove border space in html table

HTML Table - Cell that Spans Many Columns

Use the colspan property for making a cell span of more than one column:

Example

<table>
  <tr>
    <th>Name</th>
    <th colspan="2">Telephone</th>
  </tr>
  <tr>
    <td>Bill Gates</td>
    <td>55577854</td>
    <td>55577855</td>
  </tr>
</table>

Result of the above query

Name	Telephone
Bill Gates	55577854	55577855

It is also used for table colspan rowspan generator, table colspan all, table colspan not working, table center text, colspan width, table colspan 1.5

HTML Table - Cell that Spans Many Rows

Use the rowspan property to create a cell span of more than one row:

Example

<table>
  <tr>
    <th>Name</th>
    <th>City</th>
  </tr>
  <tr>
    <td>John</td>
    <td rowspan="2">London</td>
  </tr>
  <tr>
    <td>Jack</td>
  </tr>
</table>

Result of the above query

Name	City
John	London
Jack	London

It is also used for table rowspan and colspan, rowspan 1.5, rowspan dynamically, text center, not working, generator, first column, vertical text, text align top

HTML Table - Add a Caption

Use the caption element to add a caption to your table:

Example

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

Result of the above query

Monthly savings
Month	Savings
January	$100
February	$50

Note: Following the table tag, the caption tag must be put.

It is also used for table caption top, border, font size, position, left align, bold and table caption not showing, hidden, background color

A Special Style for One Table

Add an id attribute to the table to provide a custom style for a certain table:

It is also used for table design examples with code, table border style and table style without css, table style inline, codepen, and design