In order to create a web page that features numerous fields displayed in a row of tables, I am looking to categorize them separately and design each category's table uniquely.
I'm curious if having multiple tables on a webpage impacts its speed. Would it be more efficient to have 10 tables with 10 rows each, or opt for a single table with 100 rows? Will there be a noticeable difference in the loading speed of the page?
If you're considering a setup like that, my suggestion would be to utilize one table while making extensive use of the thead and tbody elements to organize each distinct section.
Update: After conducting some tests, I did not observe any significant difference in performance between using a single table or multiple tables. On my device, the average page generation time was approximately 1800ms (based on 10 test runs for each scenario) for both a single table containing 10000 rows and 5 columns, as well as 10 tables with 1000 rows and 5 columns each.
Here is the code snippet used for testing:
<html>
<head>
<script type="text/javascript">
var start_time = (new Date()).getTime();
function detectTimeDiff(){
alert("Time taken: "+((new Date()).getTime() - start_time)+" milliseconds.");
}
</script>
</head>
<body onload="detectTimeDiff()">
<?php
$multiple_tables = true;
$table_count = 10;
?>
<table>
<?php
$table_count--;
for($i=0;$i<10000;$i++){
if($multiple_tables){
if($i%$table_count == 0){
?>
</table>
<table>
<?php
}
}
?>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<?php
}
?>
</table>
</body>
</html>
When using this HTML inside an ng-repeat, there is a difference in behavior: This part works fine: <tr> <td ng-class="info.lastInMonth">{{ info.date_formatted }}</td> ... But this section does not work as expected: <tr ng ...
I am relatively new to this. I am trying to have a value displayed in a div that has already been defined in CSS when a button is clicked. However, all that appears is the button itself. I just can't seem to get the desired result. Here is what I have ...
Is there a way to retrieve a specific CSS property of an element, even if it is inherited from its parent? The standard jQuery method .css() can help with this. Consider the following HTML structure: <div id="container"> some text<br> ...
I need help creating a footer for my printed pages, but the footer is overlapping the content. I've tried adding padding-bottom to the @page CSS rule with the height of the footer, but it's not making a difference. Any suggestions on how to prop ...
I have a collection of messy HTML files filled with repeated blockquote tags used to showcase lines of poetry. For example: <blockquote><blockquote>roses are red</blockquote></blockquote><br> <blockquote><b ...
I have been wrestling with a challenging question regarding CSS layouts, and I believe it's time to seek advice from those who may be more knowledgeable in this area. Let's discuss why my current layout is presenting such a headache. Take a look ...
white button I attempted to create a vertical navigation bar with a background image, but when I clicked the button, it changed to white. How can I ensure that the buttons stay white? I've experimented with primary-outline options I found through my ...
My goal is to add classes one by one [test0 test1 test2] up to 10, with each class being added after one second. $('.rating-block').AddClass('test0 test1 test2 ... test10' ); I am experimenting with the following code, but I don' ...
Last night, I finished working on my app for a school project before going to bed. However, I didn't build it because I planned on making some changes in the morning. When my classmates asked for help with their project, I opened Android Studio only t ...
When the screen is lg or larger, I would like my image to be full width (w-100), and when the screen is md or smaller, I want it to be half width (w-50). <div> <div class="container"> <div class="row"& ...
Trying to create a program that takes user input from HTML forms and organizes it into objects for each user. I have set up an HTML form, created a constructor, added a click event to generate the object, saved it in a variable, and attempted to place that ...
Whenever a button is clicked, the data will be pushed into an array list and stored in session storage. var data = [ 'name':"name", 'id'=1 ]; var arrayList = new Array; arrayList.push(data); sess ...
Is it possible to only have 5 boxes per line and then the next one goes to the next line using CSS? https://i.stack.imgur.com/L7vr4.png .box { border-color: #32ff00; border-width: 4px; border-style: dotted; width: 170px; height: 200px; fl ...
I am encountering an issue with a wordpress plugin and I am attempting to conceal (or alternatively, replace which would be fantastic) the terms "DD", "MM" and "YYYY" in the provided code: <div class="smFormInlineFormCont"> <div class="smInli ...
I need help with my PHP mailer code. I want to send an attachment without saving it on the server. Can someone guide me on how to achieve this? $mail = new PHPMailer(); $mail->IsSMTP(); // set mailer to use SMTP $mail->Host = "localh ...
Currently Utilizing VueJS 2.0 I am looking to transform the following into a clickable link. Is this possible? This is my vue component: <template> <div v-html="markup"></div> </template> <script> new Vue({ data() { ...
Here's a simple jQuery code to draw a triangle in a canvas element that is 40 by 40: var context1 = $("#arrow_left").get(0).getContext('2d'); context1.beginPath(); context1.moveTo(25,0); context1.lineTo(0,20); context1.lineTo(25,40); contex ...
When working with Angular and Bootstrap to develop a navigation bar, I encountered an issue with aligning a user icon in the navbar. The picture below shows the problem that arises when trying to center align the user icon among other links in the navbar. ...
Hello jQuery Experts, I am a beginner with jQuery and have a query. I have managed to enable the "Add category" button when any three values (one value per box) are selected from the above three boxes. However, I am struggling to enable the "Remove Categor ...
I am in need of a system that consists of 8 columns, and I require a Bootstrap class that will allow an HTML element to span across 2 or more of the columns within the grid. The purpose of this is to create a PMS (Property Management System), where certai ...