I generally use ul for lists of items
<ul class="users">
<li class="user">
<div class="name">Jack</div>
<div class="gender">M</div>
<div class="salary">$15k</div>
<div class="rank">Burger Flipper</div>
</li>
<li class="user">
<div class="name">Jill</div>
<div class="gender">F</div>
<div class="salary">$17k</div>
<div class="rank">Fry Tosser</div>
</li>
</ul>
When creating a heading for this list, is it best to include the heading as part of the list
<li class="user head">
<div class="human-attributes">This is:</div>
<div class="job-attributes">They are:</div>
</li>
or should it be a separate list?
<ul class="users head">
<li class="user">
<div class="human-attributes">This is:</div>
<div class="job-attributes">They are:</div>
</li>
</ul>
depends on what you want to do with it .. .You really should be using:
<table><thead></thead><tbody></tbody></table>
constructs which are meant for content you are describing, instead of <li> embedding a <div> which is going to get rendered in a bizarre way by default.
You can then use CSS to control the behaviour.
This is one of the legitimate uses of tables in HTML. You should not semantically be using unordered lists to present "tabular" data (which is what you are describing). You should be using something like this:
<table>
<thead>
<tr>
<th>Name</th>
<th>Gender</th>
</tr>
</thead>
<tbody>
<tr>
<td>Jack</td>
<td>M</td>
</tr>
<tr>
<td>Jill</td>
<td>F</td>
</tr>
</tbody>
</table>
http://www.w3.org/MarkUp/html3/listheader.html
Was a working draft.
For now your solution seem the best. but maybee whit a different class.
Related
on the home page of my dummy webapplication I want to display the top 5 sellers and the newest product. For this I am using a slide show. The slide show is already implemented. For the slides I want to use embedded HTML files with help of iframe tags. These embedded HTML files should display data loaded from mysql database.
The problem: how can I add a java entity to an iframe instead of adding it as an object to the ModelAndView? Is this even possible? Code snippet of the Spring controller (for loading the home page):
#RequestMapping(value={"","/"}, method = RequestMethod.GET)
public ModelAndView showHomePage() {
ModelAndView mv = new ModelAndView();
mv.setViewName("home");
List<ProductCategoryModel> productList = this.productRepository.getAllProductsByProductCategoryModel();
mv.addObject("productList",productList);
return mv;
}
Here I was adding all products as a list object to the home page view. Now inside the home.html, I would like to pass that list object to the iframe, but how? Here is the code snipped of the iframe (which is inside the div with id=slides__1):
<section>
<div class="slider-container">
<div class="slider">
<div class="slides">
<div id="slides__1" class="slide">
<iframe src="iframes/test.html" title="Top 5 Sellers"></iframe>
<a class="slide__prev" href="#slides__4" title="Next"></a>
<a class="slide__next" href="#slides__2" title="Next"></a>
</div>
<div id="slides__2" class="slide">
<span class="slide__text">2</span>
<a class="slide__prev" href="#slides__1" title="Prev"></a>
<a class="slide__next" href="#slides__3" title="Next"></a>
</div>
<div id="slides__3" class="slide">
<span class="slide__text">3</span>
<a class="slide__prev" href="#slides__2" title="Prev"></a>
<a class="slide__next" href="#slides__4" title="Next"></a>
</div>
<div id="slides__4" class="slide">
<span class="slide__text">4</span>
<a class="slide__prev" href="#slides__3" title="Prev"></a>
<a class="slide__next" href="#slides__1" title="Prev"></a>
</div>
</div>
<div class="slider__nav">
<a class="slider__navlink" href="#slides__1"></a>
<a class="slider__navlink" href="#slides__2"></a>
<a class="slider__navlink" href="#slides__3"></a>
<a class="slider__navlink" href="#slides__4"></a>
</div>
</div>
</div>
</section>
And now the HTML page (code snippet of the section) I want to embedd as iframe and that should load all products into a table. In this view I will access the list object with all products:
<section>
<div class="container">
<br><br><br>
<table class="table table-bordered table-striped" id="product-table">
<thead>
<tr>
<th>Image</th>
<th>Product Id</th>
<th>Category</th>
<th>Product Description</th>
<th>Price in $</th>
<th>Image Source</th>
<th>Enabled</th>
</tr>
</thead>
<tbody>
<tr th:each="product: ${productList}">
<td><img th:src="${product.productImgSource}" alt="productImg" width="50" height="50"></td>
<td th:text="${product.productId}"></td>
<td th:text="${product.categoryText}"></td>
<td th:text="${product.productDescription}"></td>
<td th:text="${product.productPrice}"></td>
<td th:text="${product.productImgSource}"></td>
<td th:text="${product.enabled}"></td>
</tr>
</tbody>
</table>
</div>
</section>
Note: finding the top 5 sellers is not implemented yet, I just wanted to test it first with all products. Thanks in advance for any advice.
I'm using Angular2-Collapsible for my project. On clicking the table row, I want the details to be displayed. The code is attached below. Basically if I add [detail]= "detail1" then the collapsible-table-row-detail would be displayed on click. But since I'm using a for loop, I have to use the variable i. I've tried [detail]= "'detail'+i" and [attr.detail]= "'detail'+i". Nothing seems to be working.
<collapsible-table [type]="'accordion'" borderedVertically="true" class="table">
<thead class="table-heading">
<collapsible-table-row>
<th></th>
<th>Reference ID</th>
<th>Order ID</th>
<th> OName</th>
<th>FP</th>
<th>SP</th>
<th>Stat</th>
<th>date</th>
</collapsible-table-row>
</thead>
<tbody>
<collapsible-table-row *ngFor="let detail of details; let i = index" [attr.data-index]="i" [detail]="'detail'{{i}}">
<td><div class="input-group-text">
<input type="checkbox" aria-label="Checkbox for following text input">
</div>
</td>
<td (click)="showFirst=!showFirst"><i class="material-icons" *ngIf="showFirst"><span class="bulleticon"> - </span></i><i class="material-icons" *ngIf="!showFirst"><span class="bulleticon"> + </span> </i>{{detail.Reference_Id}}<br></td>
<td> {{detail.OId}} </td>
<td>{{detail.OName}}</td>
<td>{{detail.FP}}</td>
<td>{{detail.SP}}</td>
<td>{{detail.Stat}} </td>
<td>{{detail.date}}</td>
</collapsible-table-row>
<collapsible-table-row-detail #detail1 class="hidden-table">
<div class="container">
<div class="list col-5">
<span class="heading"> Order details </span>
<ul class="unorderedlist">
<li> data1 </li>
<li> data2 </li>
<li> data3</li>
</ul>
</div>
</div>
</tbody>
</collapsible-table-row-detail>
Thanks in advance!
Edit: Here's a stackblitz implmentation of what I'm trying to acheive. I've used [detail]= "detail1" for demo purposes. But I need to use a variable "i" in the for loop.
Visit https://stackblitz.com/edit/angular-fw5upv.
Try using
[detail]=" 'detail' + i "
Or
detail="detail{{i}}"
Try this:
<tbody>
<ng-container *ngFor="let detail of details; let i = index" >
<collapsible-table-row [attr.data-index]="i" [detail]="detail1">
<td>
<div class="input-group-text">
<input type="checkbox" aria-label="Checkbox for following text input">
</div>
</td>
<td >6565</td>
<td> {{detail.oid}} </td>
<td>{{detail.pname}}</td>
<td>{{detail.price}}</td>
<td>{{detail.qoh}}</td>
</collapsible-table-row>
<collapsible-table-row-detail #detail1 class="hidden-table">
<div class="container">
<div class="list col-5" >
<span class="heading"> Order details </span>
<ul class="unorderedlist">
<li> data4 </li>
<li> data5</li>
<li> data6 </li>
</ul>
</div>
</div>
</collapsible-table-row-detail>
</ng-container>
</tbody>
You can check in your stackblitz just replace the html code.
You could try using a method in your HTML like:
[detail]="getDetail(i)"
And then in your ts file:
getDetail(i: number) {
return 'detail' + i;
}
I have not tried this myself, so I'm not sure if it will work.
Me need to save table <table class="tftable" border="1"> information </table> . Remove other information before and after.
How to implement this is better. There are about 90,000 pages of this kind. The structure they all have the same. Information in the tables is different.
<h1>jnouaoh098hwgv 03g030h </h1>
<div class="list-posts">
<div class="post-item">
<div class="text">
<p>iuah8n987hauuih uouahou paniuaugpiubrebg940wbunv9wh0uvnw95n 8h 8hgu 0hu8gh</p>
<h2>594w81grghiwuehuwn</h2>
<table class="tftable" border="1">
<tr>
<th>aiurh8n 7a8 </th>
<th>aihnguaw </th>
</tr>
<tr>
<td>uuhqncm998m4</td>
<td>от 11 000 wg.</td>
</tr>
<tr>
<td>shshrs</td>
<td>оsuhrguhousehrg</td>
</tr>
<td>sre e</td>
<td>от 500 fs.</td>
</tr>
<tr>
<td>rseh sreh</td>
<td>от 400 ewf.</td>
</tr>
<tr>
<td>ge ge</td>
<td>от 350 gw.</td>
</tr>
<tr>
<td>eg</td>
<td>ge gew</td>
</tr>
</table>
<div class="footer">
<div class="container">
<div class="row">
<div class="col-sm-4 text-left">
<h5>aweaweh hahrhrhhrrrrrrrrrrarh
<ul>
<li><i class="fa fa-phone"></i> 598229929</li>
<li><i class="fa fa-envelope"></i> 5191iuhyg7g</li>
<li><i class="fa fa-map-marker"></i> 56cn847n9qc849</li>
</ul>
If you want to get all ocurrences of <table>, <\table> and the contents between this tags.
You can use this Regex in the search pattern:
.*?(<table(.*)<\/table>).*
And this token in the substitution field:
\1
Don't forget to check true for the options:
Regular Expressions
. Matches new line
Like this image:
My tables seem to be working differently than I would like, but as I try to reorganize it, it become worse. I'm not sure if I using TD or TR wrong or what is happening. With the code the way it is now, the horizontal navigation bar won't set a yellow border and my tables below it aren't how I want them.
It's supposed to look like this:
Logo(top all the way across)
Horizontal navigation bar(all the way across above vert navigation bar, history, and gainful)
vert navigation bar(left to history), history,Gainful(right of history)
about(below history in border)
<body >
<Table width=100% height=500 border=3
bordercolor=blue>
<TR height=20% style="background-color:black; background-width:100%">
<TD><img src="logo.png" alt="C"/>
<span style="color:white; font-size:22px; float:bottom">Computer Science Department</span></TD>
</TR>
<TR height=10% >
<TD style="border-color:green;border-width: 2px">
<nav class="horizontal"style=" padding-left:0px;
border-color:yellow;color:black; font-size:20px; width:100%; " >
<ul>
<li>Contact</li>
<li>Faculty</li>
<li>Programs</li>
<li>Classes</li>
<li>Program List</li>
</ul>
</nav>
<nav class="vertical" style="border-color:green;text-align: center; color: black">
<ul style="list-style-type:none">
<li>Computer Programming</li><BR>
<li>Computer Specialist</li><BR>
<li>Information Technology Analysis</li><BR>
<li>Information Technology Management</li><BR>
<li>Network System Developer</li><BR>
<li>Web Development Specialist</li><BR>
</ul>
</nav></TD>
</TR>
<TR height=60%>
<TD>3 content
<Table width=90% height=90% border=4
bordercolor=blue>
<TR>
<TD >History</TD>
<TR>
<TD>About</TD>
</TR>
<TD >Gainful</TD>
</Table>
</TD>
</TR>
<TR height=10%>
<TD><footer >
</footer></TD>
</TR>
</Table>
</body>
</html>
I'm not sure if that explained it well, if it didn't please let me know.
I figured out what the problem was. I had some of the tables in the wrong order, which messed it up. Thank-you for the assistance.
Hi Im making a theme for my website which has a user menu in the top right corner of the page. This is inside a purple bar which also holds the title of the page. I have managed to get the user menu on the right hand side but I'm unable to get it into the top bar, it just sits bellow the bar. To see exactly what I mean here's a link to my site http://cpanel.gaigo.org
I believe it has something to do with the header div spreading accross the whole page but im unable to get it to shrink down to only fill 250px.
The HTML code is bellow:
<div id="headerWrap" style="position:fixed;width:100%; height:59px;z-index:1;background-color:#494158;">
<div id="header" style="width:250px;">
<h1 style="margin-bottom:0; margin-left:20px; color:#fff;" id="Title">GaiGO CPanel</h1>
</div>
<div id="userMenuButton" style="float:right;margin-right:10px;width:auto;">
<span style="color:#fff;">Hi, Riley Evans</span>
<img src="user.png" height="30" width="30"/>
</div>
</div>
Thanks for any responses in advance I'm sure they will help me figure this out.
You just try this code inside your body tag.I maked some changes inside your inline css in header,userbutton div id's
<div id="container">
<div id="headerWrap" style="position:fixed;width:100%; height:59px;z-index:1;background-color:#494158;">
<div id="header" style="width:250px;float:left">
<h1 style="margin-bottom:0; margin-left:20px; color:#fff;" id="Title">GaiGO CPanel</h1>
</div>
<div id="userMenuButton" style="float:right;margin-right:10px;width:auto;margin-top:25px;">
<span style="color:#fff;">Hi, Riley Evans</span>
<img src="user.png" height="30" width="30">
</div>
</div>
<div id="menuWrap" style="position:fixed; height:100%; z-index:0;">
<div id="menuHolder" style="background-color:#77bb66;height:inherit;width:50px;float:left;margin-top:21px;position:relative;">
<table class="menu" style="margin:0 auto; margin-top:38px;">
<tbody>
<tr>
<td class="sideMenuOption" id="dashboardButton" onclick="menuSlider('dashboardSubMenu')">
<img src="/style/images/designer-icons/Home-48.png" width="40" height="40">
</td>
</tr>
<tr>
<td class="sideMenuOption" id="pagesButton" onclick="menuSlider('pagesSubMenu')">
<img src="/style/images/designer-icons/Multi-Page-48.png" width="40" height="40">
</td>
</tr>
<tr>
<td class="sideMenuOption" id="mediaButton" onclick="menuSlider('mediaSubMenu')">
<img src="/style/images/designer-icons/Picture-48.png" width="40" height="40">
</td>
</tr>
<tr>
<td class="sideMenuOption" id="stylesButton" onclick="menuSlider('stylesSubMenu')">
<img src="/style/images/designer-icons/Brush-01-48.png" width="40" height="40">
</td>
</tr>
<tr>
<td class="sideMenuOption" id="settingsButton" onclick="menuSlider('settingsSubMenu')">
<img src="/style/images/designer-icons/Settings-02-48.png" width="40" height="40">
</td>
</tr>
</tbody>
</table>
</div>
<div id="subMenuHolder" class="hide">
<ul class="subMenu dashboardSubMenu" id="dashboardSubMenu">
<li>Home</li>
<li>My Site</li>
<li>Stats</li>
</ul>
<ul class="subMenu pagesSubMenu" id="pagesSubMenu">
<li>Pages</li>
<li>New page</li>
</ul>
<ul class="subMenu mediaSubMenu" id="mediaSubMenu">
<li>Library</li>
<li>Upload</li>
</ul>
<ul class="subMenu stylesSubMenu" id="stylesSubMenu">
<li>Themes</li>
<li>Customise</li>
<li>Menus</li>
<li>Mobile</li>
</ul>
<ul class="subMenu settingsSubMenu" id="settingsSubMenu">
<li>General</li>
<li>Site</li>
<li>Account</li>
</ul>
<div id="closeSubMenuButton" onclick="subMenuClose()">
<img src="/style/images/designer-icons/Arrowhead-Left-01-48.png" height="30" width="30">
</div>
</div>
</div>
<div id="contentWrap" style="width:100%;height:2000px;">
<div id="content" style="background-color:#EEEEEE;float:left;width:100%;height:2000px;margin-top:59px;margin-left:0px;">
<div id="contentHolder" style="margin-left:50px;">Content goes here</div>
</div>
</div>
</div>
The div element automatically is given the display:block property/value. Try display:inline-block. Some additional tweaks may be necessary but this should get you on your way. You may also consider wrapping the code with span elements instead of div elements.