<

HTML Tutorial

by Trainer Riad Thalji

Tables

  • Like in word processors, web pages at many times need to contain and display tabular data.
  • A table consists of a set of rows, columns, column headings, and cells.


Let’s start by a simple example:

<!doctype html>
<html>
<body>
<h1>Front-End Web Technologies </h1>
<p>Front End Web development Technologies, became more advanced, and feature rich technologies. </p>
<p>The following table shows some of the most important technologies: </p>
<table border="1" width="500">
<tr>
<th>Technology </th>
<th>Name </th>
<th>Description </th>
</tr>
<tr>
<td>HTML </td>
<td>Hyper Text Markup Language </td>
<td>The main language used for authoring web pages. </td>
</tr>
<tr>
<td>CSS </td>
<td>Cascading Style Sheet </td>
<td>Used to define styles for different HTML tags and set of HTML tags </td>
</tr>
<tr>
<td>JavaScript </td>
<td>JavaScript </td>
<td>Used to add dynamic processing of web pages, like dealing with events, and different HTML page components at the run-time </td>
</tr>
<tr>
<td>JQuery </td>
<td>JavaScript Query </td>
<td>An excellent library of JavaScript, that can speed up front-end development, and help the developer more efficiently add features, functions, and interactivity. </td>
</tr>
</table>
</body>
</html>

The result will be:





  • The table HTML code started with the <table> tag, with attributes to display a border and define a width.
  • Then the <tr> tag is used repeatedly to display table rows.
  • In the first table row tag (<tr>), we placed the table headers wrap each with a <th> tag.
  • In this table we needed three columns, this is why we used the <th> tag three times.
  • For the second row and so forth, we used the <td> tag to wrap each table cell, and again we used only 3 <td> tags per row, because we have only 3 columns.
  • Tables can be styled in many shapes using the css techniques.




From the Video Library

How to Create Multi-Lingual Navbars in ASP.Net Core 2.1

How to Create Multi-Lingual Navbars in ASP.Net Core 2.1 | Advanced Programming Series | Riad Thalji

How to Create Multi-Lingual Navbars in ASP.Net Core 2.1

How to Quickly Import Data between Excel, Access and SQL Server

Project Management Office - PMO

Project Managemenet Office - PMO Crash Course

Project Management Office - PMO

How to Create Nested Layouts in ASP.Net Core 2.1 | Advanced Programming Series | Riad Thalji

Developed by Thalji.net, © Riad Thalji