HTML Website Layout in Table Tag

While tables can be used to create website layouts, it is not recommended to use them for this purpose because they were not originally intended for this use case. Instead, modern websites typically use CSS for layout and styling.

That being said, here is an example of how tables can be used to create a basic website layout:

<table width="100%" border="0">
  <tr>
    <td colspan="2" bgcolor="#333333">
      <h1 style="color: white;">Header</h1>
    </td>
  </tr>
  <tr>
    <td width="25%" valign="top" bgcolor="#eeeeee">
      <h3>Navigation</h3>
      <ul>
        <li><a href="#">Link 1</a></li>
        <li><a href="#">Link 2</a></li>
        <li><a href="#">Link 3</a></li>
      </ul>
    </td>
    <td width="75%" valign="top" bgcolor="#ffffff">
      <h3>Content</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sed purus at nisl sodales posuere ac quis massa. Sed blandit diam a massa placerat, et egestas mi bibendum. Curabitur sed nunc nec sapien finibus tincidunt.</p>
    </td>
  </tr>
  <tr>
    <td colspan="2" bgcolor="#333333">
      <h2 style="color: white;">Footer</h2>
    </td>
  </tr>
</table>

Output

In this example, a table is used to create a website layout with a header, navigation, content, and footer section. The width attribute is set to 100% to make the table fill the entire width of the screen. The border attribute is set to 0 to remove the border around the table.

The first row of the table is used to create the header section, which has a background color of #333333 and a white header text. The colspan attribute is set to 2 to span across both columns of the table.

The second row of the table contains the navigation and content sections. The first column has a width of 25% and a background color of #eeeeee, while the second column has a width of 75% and a background color of #ffffff. The valign attribute is set to top to align the content at the top of the cells.

The navigation section contains an unordered list of links. The content section contains a paragraph of Lorem Ipsum text.

The third row of the table is used to create the footer section, which is similar to the header section in terms of its background color and white text. The colspan attribute is set to 2 to span across both columns of the table.

While this example demonstrates how tables can be used for website layouts, it is important to note that this approach is not recommended. Instead, modern websites typically use CSS for layout and styling, which provides more flexibility and better accessibility.

Wordpress Social Share Plugin powered by Ultimatelysocial
Wordpress Social Share Plugin powered by Ultimatelysocial