askvity

How do I make two lines in one cell in HTML?

Published in HTML Tables 2 mins read

You can create two lines within a single HTML table cell using the <br> tag to insert a line break.

Using the <br> Tag

The <br> tag is an HTML element that inserts a single line break. You can use it within a table cell (<td> or <th>) to display content on multiple lines.

Example:

<!DOCTYPE html>
<html>
<head>
<title>HTML Table with Line Breaks</title>
</head>
<body>

<h2>HTML Table with Line Breaks</h2>

<table border="1">
  <tr>
    <th>Header 1</th>
    <th>Header 2</th>
  </tr>
  <tr>
    <td>Row 1, Cell 1</td>
    <td>Row 1, Cell 2<br>This is the second line in Cell 2</td>
  </tr>
  <tr>
    <td>Row 2, Cell 1</td>
    <td>Row 2, Cell 2</td>
  </tr>
</table>

</body>
</html>

In this example, the content "Row 1, Cell 2" and "This is the second line in Cell 2" are displayed on separate lines within the same table cell because of the <br> tag, as referenced by the provided information: "| Abcd<brEfgh |."

Explanation:

  • <table>: Defines the HTML table.
  • <tr>: Defines a table row.
  • <th>: Defines a table header cell.
  • <td>: Defines a table data cell (where you'll likely use the <br> tag).
  • <br>: Inserts a line break, moving the text after the tag to the next line within the cell.

Alternative Approaches (Consider only if necessary)

While <br> is the simplest and most common method, CSS properties like white-space: pre-line; or using <p> tags with appropriate styling can also achieve multi-line text within a cell. However, for basic line breaks, <br> is generally preferred for its simplicity.

Related Articles