HTML Tables
HTML tables help web developers organize data neatly into rows and columns.
Example Table
Company Contact Country
Alfreds Futterkiste Maria Anders Germany
Centro comercial Moctezuma Francisco Chang Mexico
Ernst Handel Roland Mendel Austria
Island Trading Helen Bennett UK
Laughing Bacchus Winecellars Yoshi Tannamuri Canada
Magazzini Alimentari Riuniti Giovanni Rovelli Italy
Defining an HTML Table
In HTML, a table is made up of rows (<tr>) and cells (<td> or <th>).
Basic HTML Table Example:
<table>
<tr>
<th>Company</th>
<th>Contact</th>
<th>Country</th>
</tr>
<tr>
<td>Alfreds Futterkiste</td>
<td>Maria Anders</td>
<td>Germany</td>
</tr>
<tr>
<td>Centro comercial Moctezuma</td>
<td>Francisco Chang</td>
<td>Mexico</td>
</tr>
</table>
Table Cells (<td>)
Each cell in a table is wrapped in <td> tags.
<td> stands for "table data."
The content inside <td> is the data shown in that cell.
Example:
<table>
<tr>
<td>Emil</td>
<td>Tobias</td>
<td>Linus</td>
</tr>
</table>
Table cells can include text, images, links, lists, and even other tables.
Table Rows (<tr>)
Every row in a table begins with <tr> and ends with </tr>.
<tr> stands for "table row."
Example:
html
CopyEdit
<table>
<tr>
<td>Emil</td>
<td>Tobias</td>
<td>Linus</td>
</tr>
<tr>
<td>16</td>
<td>14</td>
<td>10</td>
</tr>
</table>
You can have as many rows as you need.
In advanced tables, rows can have different numbers of cells using colspan or rowspan.
Table Headers (<th>)
To create header cells (bold and centered by default), use <th> instead of <td>.
Example:
<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>
Adding Borders to HTML Tables
To add borders to your HTML tables, use the border property in CSS. Apply it to the <table>,
<th>, and <td> elements:
table, th, td {
border: 1px solid black;
}
Collapsing Borders
By default, borders may appear doubled between cells. To make borders appear as a single line,
use the border-collapse property:
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
Stylish Table Borders
You can style your borders to match the design of your page. For example, using a light
background color and white borders gives a clean look:
table, th, td {
border: 1px solid white;
border-collapse: collapse;
}
th, td {
background-color: #96D4D4;
}
Rounded Borders
To give your table rounded corners, use the border-radius property:
table, th, td {
border: 1px solid black;
border-radius: 10px;
}
To apply rounded borders only to cells (and not the entire table), leave out table in your CSS
selector:
th, td {
border: 1px solid black;
border-radius: 10px;
}
Dotted and Styled Borders
You can customize the style of table borders using border-style. Available styles include:
dotted
dashed
solid
double
groove
ridge
inset
outset
none
hidden
Example:
th, td {
border-style: dotted;
}
Changing Border Color
To change the color of borders, use the border-color property:
th, td {
border-color: #96D4D4;
}
HTML tables allow you to set sizes for columns, rows, or the entire table using the style
attribute.
Setting Table Width
To set the width of the entire table:
<table style="width:100%">
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
</table>
Note: Using width: 100% means the table will expand to match the width of its container
(usually the <body>).
Column Width
To set the width of a specific column, add the style attribute to a <th> or <td>:
<table style="width:100%">
<tr>
<th style="width:70%">Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
</table>
Row Height
To set the height of a specific row, apply the style attribute directly to the <tr> tag:
<tr style="height:200px">
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
Sometimes you want a cell to span across multiple columns or rows.
Colspan (Merge Columns)
Use the colspan attribute to make a cell span across two or more columns:
<table>
<tr>
<th colspan="2">Name</th>
<th>Age</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>43</td>
</tr>
</table>
Note: colspan="2" means the cell spans 2 columns.
Rowspan (Merge Rows)
Use the rowspan attribute to make a cell span multiple rows:
<table>
<tr>
<th>Name</th>
<td>Jill</td>
</tr>
<tr>
<th rowspan="2">Phone</th>
<td>555-1234</td>
</tr>
<tr>
<td>555-8745</td>
</tr>
</table>
HTML Lists
HTML lists are used by web developers to group related items together. There are three main
types:
Unordered Lists (<ul>)
Ordered Lists (<ol>)
Description Lists (<dl>)
Unordered Lists
An unordered list is a collection of items that appear with bullet points (by default). It starts with
the <ul> tag, and each item is placed within an <li> tag.
Example:
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
Customizing Bullet Styles
You can change the bullet style using the CSS list-style-type property.
Value Description
disc Solid circle (default)
Value Description
circle Hollow circle
square Square
none No marker
Examples:
Disc (default):
<ul style="list-style-type: disc;">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
Circle:
<ul style="list-style-type: circle;">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
Square:
<ul style="list-style-type: square;">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
No Markers:
<ul style="list-style-type: none;">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
Ordered Lists
An ordered list displays items with numbers or letters. It begins with the <ol> tag, and each item
is wrapped in an <li> tag.
Default Example:
<ol>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
Customizing Numbering
The <ol> tag supports the type attribute to change the numbering style.
Type Value Description
1 Numbers (default)
A Uppercase letters
a Lowercase letters
I Uppercase Roman numerals
i Lowercase Roman numerals
Examples:
Uppercase Letters:
<ol type="A">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
Lowercase Roman Numerals:
<ol type="i">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
Start Counting from a Specific Number
Use the start attribute to begin from a custom number:
<ol start="50">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
Description Lists
A description list is used to define terms and their descriptions. It uses the <dl>, <dt>, and <dd>
tags.
<dl> defines the list
<dt> defines the term
<dd> defines the description
Example:
<dl>
<dt>Coffee</dt>
<dd>- black hot drink</dd>
<dt>Milk</dt>
<dd>- white cold drink</dd>
</dl>
Nested Lists
Lists can be nested inside other lists. This applies to both ordered and unordered lists.
Example (nested unordered):
<ul>
<li>Coffee</li>
<li>Tea
<ul>
<li>Black Tea</li>
<li>Green Tea</li>
</ul>
</li>
<li>Milk</li>
</ul>
Example (nested ordered):
<ol>
<li>Coffee</li>
<li>Tea
<ol>
<li>Black Tea</li>
<li>Green Tea</li>
</ol>
</li>
<li>Milk</li>
</ol>
Tip: List items can also include other HTML elements like images, links, or paragraphs.
Creating a Horizontal Navigation Menu with CSS
You can use lists to build horizontal navigation menus with CSS.
Example:
<!DOCTYPE html>
<html>
<head>
<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 16px;
text-decoration: none;
}
li a:hover {
background-color: #111;
}
</style>
</head>
<body>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#news">News</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#about">About</a></li>
</ul>
</body>
</html>
HTML JavaScript
JavaScript adds interactivity and dynamic behavior to HTML pages.
The <script> Tag
The <script> tag is used to insert JavaScript into an HTML page.
You can either write the JavaScript code directly between the <script> tags or link to an
external .js file using the src attribute.
JavaScript is commonly used for:
Changing content
Validating forms
Updating styles
Manipulating images
To target an HTML element, JavaScript often uses the method:
document.getElementById("elementID")
Here’s an example that changes the content of an element with the ID demo:
<script>
document.getElementById("demo").innerHTML = "Hello JavaScript!";
</script>
Want to go deeper? Check out our full JavaScript tutorial.
What JavaScript Can Do
Change Content
document.getElementById("demo").innerHTML = "Hello JavaScript!";
Change Styles
document.getElementById("demo").style.fontSize = "25px";
document.getElementById("demo").style.color = "red";
document.getElementById("demo").style.backgroundColor = "yellow";
Change Attributes
document.getElementById("image").src = "picture.gif";
The <noscript> Tag
If a user has JavaScript disabled or is using a browser that doesn't support it, the <noscript> tag
shows a fallback message.
Example
<script>
document.getElementById("demo").innerHTML = "Hello JavaScript!";
</script>
<noscript>
Sorry, your browser does not support JavaScript!
</noscript>
JavaScript Placement in HTML
The <script> Tag
To add JavaScript to your HTML page, use the <script> tag:
<script>
document.getElementById("demo").innerHTML = "My First JavaScript";
</script>
Older examples may include type="text/javascript" inside the <script> tag, but it’s not
necessary anymore—JavaScript is the default scripting language in HTML.
JavaScript Functions & Events
A function is a block of JavaScript code that runs when it's called.
You can trigger functions using events, like clicking a button.
You'll learn more about functions and events as you go.
Where to Place JavaScript: <head> vs <body>
You can include scripts in the <head>, the <body>, or both sections of your HTML document.
Example: Script in <head>
The JavaScript is placed in the <head> section, and the function runs when the user clicks a
button:
<!DOCTYPE html>
<html>
<head>
<script>
function myFunction() {
document.getElementById("demo").innerHTML = "Paragraph changed.";
}
</script>
</head>
<body>
<h2>JavaScript in Head</h2>
<p id="demo">A Paragraph</p>
<button onclick="myFunction()">Try it</button>
</body>
</html>
Example: Script in <body>
Here, the script is placed at the bottom of the <body>:
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript in Body</h2>
<p id="demo">A Paragraph</p>
<button onclick="myFunction()">Try it</button>
<script>
function myFunction() {
document.getElementById("demo").innerHTML = "Paragraph changed.";
}
</script>
</body>
</html>
Placing your scripts at the end of the <body> helps your page load faster, since the browser
doesn’t pause rendering to load the script.
External JavaScript
You can also keep JavaScript code in an external .js file. This keeps your HTML clean and
makes code easier to maintain.
Example (External File: myScript.js)
function myFunction() {
document.getElementById("demo").innerHTML = "Paragraph changed.";
}
Link the External Script in HTML:
<script src="myScript.js"></script>
You can include external scripts in the <head> or <body> section—whichever fits your design.
Note: Do not wrap external JavaScript files with <script> tags inside the .js file.
Why Use External JavaScript?
Using external files offers several advantages:
Keeps HTML and JavaScript separate
Makes both easier to read and maintain
Speeds up page loading thanks to browser caching
Add Multiple Scripts
<script src="myScript1.js"></script>
<script src="myScript2.js"></script>
Referencing External Scripts
You can link to external scripts in three ways:
1. Full URL
<script src="https://www.rucu.com/js/myScript.js"></script>
2. File Path
<script src="/js/myScript.js"></script>
3. File Name Only (Same Directory)
<script src="myScript.js"></script>
