Thu. Jun 17th, 2021

Requirement Description: In this post, I will show you how we can make use of HTML and CSS code to design a page in Oracle APEX.

Sample order is shown below:

Solution: For the solution of the above requirement follow the steps as shown below:

Step 1: Create a blank page with the name as Employee Details

Step 2: Create a Region and set the following properties for that Region.

  • Title: Employees Details
  • Type: Static Content
  • Text:
<table id = "employees">
  <tr>
    <th>Company</th>
    <th>Contact</th>
    <th>Country</th>
  </tr>
  <tr>
    <td>ABC</td>
    <td>Susanto Paul</td>
    <td>India</td>
  </tr>
  <tr>
    <td>ABC</td>
    <td>Moumita Deb</td>
    <td>India</td>
  </tr>
  <tr>
    <td>XYZ</td>
    <td>Lei Chang</td>
    <td>Japan</td>
  </tr>
  <tr>
    <td>XTA</td>
    <td>Martin</td>
    <td>Austria</td>
  </tr>
</table>

Step 3: Click on Page 5: Employee Details > Set the Inline CSS code as shown below

#employees {
  font-family: Arial, Helvetica, sans-serif;
  border-collapse: collapse;
  width: 100%;
}

#employees td, #employees th {
  border: 1px solid #ddd;
  padding: 8px;
}

#employees tr:nth-child(even){background-color: #f2f2f2;}

#employees tr:hover {background-color: #ddd;}

#employees th {
  padding-top: 12px;
  padding-bottom: 12px;
  text-align: left;
  background-color: #0076df;
  color: white;
}

Save and run the application. Thus, the ran application is shown as below:

Hence, the solution to our requirement.

If you like the post please comment, share, and do join me on Facebook. Please subscribe to my YouTube Channel for video tutorials.

Thanks & Regards,
Susanto Paul

 203 total views,  2 views today

By Susanto Paul

Susanto is an Oracle ACE, a qualified MCA, MBA, and a highly-skilled Senior Oracle Specialist. He is an enthusiastic Blogger and YouTuber who helps learners to solve their complex problems more efficiently. He has 9+ years of experience in multiple technologies like AWS, Oracle ADF, Oracle APEX, Oracle JET, Oracle VBCS, Oracle IDCS, Oracle PL/SQL, Oracle Integration Cloud, Java, JDBC, Servlets, JSP, Spring, Hibernate, HTML5, CSS3, JavaScript, TypeScript, NodesJS, Angular, MySQL, Oracle WebLogic Server, JUnit, JMeter, Selenium Web Driver, etc. He is a certified: Oracle Certified Professional Java SE 6 Programmer, Oracle ADF 11g Certified Implementation Specialist, Oracle Cloud Platform Application Integration 2020 Certified Specialist, Oracle Cloud Infrastructure Foundations 2020 Certified Associate, and Oracle Cloud Infrastructure Developer 2020 Certified Associate

Leave a Reply

Your email address will not be published. Required fields are marked *