Zebra striping

Last updated
Zebra striping used in Nautilus. Zebra-striping.png
Zebra striping used in Nautilus.

Zebra striping is the coloring of every other row of a table to improve readability. [1] Although zebra striping has been used for a long time to improve readability, there is relatively little data on how much it helps. [2] [3]

Contents

Implementation

In HTML documents, zebra striping can be implemented using the Cascading Style Sheets :nth-child(even) pseudo-selector. [4] [5]

The Bootstrap CSS framework features zebra striping through the .table-striped class. [6]

See also

Related Research Articles

<span class="mw-page-title-main">Zebra</span> Black-and-white striped animals in the equid family

Zebras are African equines with distinctive black-and-white striped coats. There are three living species: Grévy's zebra, the plains zebra, and the mountain zebra. Zebras share the genus Equus with horses and asses, the three groups being the only living members of the family Equidae. Zebra stripes come in different patterns, unique to each individual. Several theories have been proposed for the function of these patterns, with most evidence supporting them as a deterrent for biting flies. Zebras inhabit eastern and southern Africa and can be found in a variety of habitats such as savannahs, grasslands, woodlands, shrublands, and mountainous areas.

<span class="mw-page-title-main">Zebra crossing</span> Type of pedestrian crossing

A zebra crossing or a marked crosswalk is a pedestrian crossing marked with white stripes. Normally, pedestrians are afforded precedence over vehicular traffic, although the significance of the markings may vary by jurisdiction. They are known as "zebra" crossings as the stripes resemble the coat of a zebra.

An HTML element is a type of HTML document component, one of several types of HTML nodes. The first used version of HTML was written by Tim Berners-Lee in 1993 and there have since been many versions of HTML. The current de facto standard is governed by the industry group WHATWG and is known as the HTML Living Standard.

Web colors are colors used in displaying web pages on the World Wide Web; they can be described by way of three methods: a color may be specified as an RGB triplet, in hexadecimal format or according to its common English name in some cases. A color tool or other graphics software is often used to generate color values. In some uses, hexadecimal color codes are specified with notation using a leading number sign (#). A color is specified according to the intensity of its red, green and blue components, each represented by eight bits. Thus, there are 24 bits used to specify a web color within the sRGB gamut, and 16,777,216 colors that may be so specified.

An XML editor is a markup language editor with added functionality to facilitate the editing of XML. This can be done using a plain text editor, with all the code visible, but XML editors have added facilities like tag completion and menus and buttons for tasks that are common in XML editing, based on data supplied with document type definition (DTD) or the XML tree.

Tableless web design is a web design method that avoids the use of HTML tables for page layout control purposes. Instead of HTML tables, style sheet languages such as Cascading Style Sheets (CSS) are used to arrange elements and text on a web page.

<span class="mw-page-title-main">Progressive enhancement</span> Web design strategy putting emphasis web content first

Progressive enhancement is a strategy in web design that puts emphasis on web content first, allowing everyone to access the basic content and functionality of a web page, whilst users with additional browser features or faster Internet access receive the enhanced version instead. This strategy speeds up loading and facilitates crawling by web search engines, as text on a page is loaded immediately through the HTML source code rather than having to wait for JavaScript to initiate and load the content subsequently, meaning content ready for consumption "out of the box" is served immediately, and not behind additional layers.

<span class="mw-page-title-main">Green Zebra</span> Variety of hybrid tomato

Green Zebra is a tomato cultivar with characteristic dark green and yellow stripes. Newer variations blush reddish instead of yellow when ripe. It is more tart than a regular tomato, and it is an early cultivar. Compared to other tomato varieties, it can produce somewhat mealy fruits depending on growing conditions.

<span class="mw-page-title-main">Zebra analysis</span> Diagnostic shading technique

Zebra analysis, or zebra striping, is a diagnostic shading technique used in computer graphics to visualize curvature on smooth surfaces. It is primarily used for computer-aided design (CAD), where it helps checking that surfaces meet smoothly. It is a simulation of the visual effect of placing an object in a tunnel lit by parallel rows of lights, or a perfectly reflecting object in a room with striped walls.

<span class="mw-page-title-main">Striped grass mouse</span> Genus of rodents

Lemniscomys, sometimes known as striped grass mice or zebra mice, is a genus of murine rodents from Africa. Most species are from Sub-Saharan Africa; L. barbarus is the only one found north of the Sahara. They are generally found in grassy habitats, but where several species overlap in distribution there is a level of habitat differentiation between them.

<span class="mw-page-title-main">CSS</span> Style sheet language

Cascading Style Sheets (CSS) is a style sheet language used for specifying the presentation and styling of a document written in a markup language such as HTML or XML. CSS is a cornerstone technology of the World Wide Web, alongside HTML and JavaScript.

HTML attributes are special words used inside the opening tag to control the element's behaviour. HTML attributes are a modifier of a HTML element type. An attribute either modifies the default functionality of an element type or provides functionality to certain element types unable to function correctly without them. In HTML syntax, an attribute is added to a HTML start tag.

Zebra stripes describe the patterns on a zebra's coat.

Cellpadding is a term used in the computer language HTML. When used in conjunction with the table element, it specifies the amount of space between the border of a table cell and its contents. Cellpadding is an attribute of an individual cell in a table, so each cell in a table can be assigned its own cellpadding value, if not assigned however, the default value for cellpadding is 1. The cellpadding attribute was added to version 2.0 of the HTML language in 1996. Space between text and borders is an important element of web page design, because it improves the readability of text and visual appeal of graphics in table cells. Cellpadding makes this possible, and web design experts emphasize the importance of carefully selecting the cellpadding values. The same effect can be accomplished in CSS.

<span class="mw-page-title-main">Bootstrap (front-end framework)</span> Web design front-end

Bootstrap is a free and open-source CSS framework directed at responsive, mobile-first front-end web development. It contains HTML, CSS and (optionally) JavaScript-based design templates for typography, forms, buttons, navigation, and other interface components.

Front-end web development is the development of the graphical user interface of a website through the use of HTML, CSS, and JavaScript so users can view and interact with that website.

<span class="mw-page-title-main">Stripe (pattern)</span> Long and narrow band of color, often in alternating sets.

A stripe is a line or band that differs in color or tone from an adjacent area. Stripes are a group of such lines in a repeating pattern of similar regions.

<span class="mw-page-title-main">CSS grid layout</span> CSS properties for complex responsive webpages

In Cascading Style Sheets, CSS grid layout or CSS grid creates complex responsive web design grid layouts more easily and consistently across browsers. Historically, there have been other methods for controlling web page layout methods, such as tables, floats, and more recently, CSS Flexible Box Layout (flexbox). CSS grid is currently not an official standard although it has been adopted by the recent versions of all current major browsers.

Timothy M. Caro is a British evolutionary ecologist known for his work on conservation biology, animal behaviour, anti-predator defences in animals, and the function of zebra stripes. He is the author of several textbooks on these subjects.

<span class="mw-page-title-main">Tables (Google)</span> Cloud-based collaborative database software

Tables is a collaborative database program developed out of Google's Area 120 incubator. Tables is available as a web application. The app allows users to collaborate in real-time to track work more efficiently using automation.

References

  1. Lee, Michael; Kent, Travis; Carswell, C. Melody; Seidelman, Will; Sublette, Michelle (2014-10-17). "Zebra-Striping: Visual Flow in Grid-based Graphic Design". Proceedings of the Human Factors and Ergonomics Society Annual Meeting . doi:10.1177/1541931214581275.
  2. Enders, Jessica (2008-05-06). "Zebra Striping: Does it Really Help?". A List Apart .
  3. Enders, Jessica (2008-09-10). "Zebra Striping: More Data for the Case". A List Apart .
  4. "How to create a zebra stripped table with CSS ?". GeeksforGeeks. 2022-02-04. Retrieved 2024-04-11.
  5. "How TO - Zebra Striped Table". W3Schools . Retrieved 2024-04-10.
  6. "Tables". getbootstrap.com. Retrieved 24 August 2024.