Style Properties

Style for table or tree UI component

Since R2019b

Use Style objects to create visual styles for cells in table UI components or nodes in tree UI components. The component must be one that is parented to a figure created with the uifigure function, or to one of its child containers. You can create a Style object using the uistyle function, specify its properties, and then apply it to the component using the addStyle function. You can remove styles from a component using the removeStyle function.

Style objects that you add to a UI component take visual precedence over properties you set on the component object, no matter the order in which you created them. For example, in this code the blue font color displays in the table even though red foreground color was set on the Table object last.

uit = uitable(uifigure,'Data',rand(100,10)); 

s = uistyle; 
s.FontColor = 'blue'; 
addStyle(uit,s); 

uit.ForegroundColor = 'red';

Color

BackgroundColor — Background color

[] (default) | RGB triplet | hexadecimal color code | 'r' | 'g' | 'b' | ...

Background color, specified as an RGB triplet, a hexadecimal color code, or one of the color options listed in the table.

RGB triplets and hexadecimal color codes are useful for specifying custom colors.

• An RGB triplet is a three-element row vector whose elements specify the intensities of the red, green, and blue components of the color. The intensities must be in the range [0,1]; for example, [0.4 0.6 0.7].

• A hexadecimal color code is a character vector or a string scalar that starts with a hash symbol (#) followed by three or six hexadecimal digits, which can range from 0 to F. The values are not case sensitive. Thus, the color codes "#FF8800", "#ff8800", "#F80", and "#f80" are equivalent.

Alternatively, you can specify some common colors by name. This table lists the named color options, the equivalent RGB triplets, and hexadecimal color codes.

Color Name	Short Name	RGB Triplet	Hexadecimal Color Code	Appearance
"red"	"r"	[1 0 0]	"#FF0000"
"green"	"g"	[0 1 0]	"#00FF00"
"blue"	"b"	[0 0 1]	"#0000FF"
"cyan"	"c"	[0 1 1]	"#00FFFF"
"magenta"	"m"	[1 0 1]	"#FF00FF"
"yellow"	"y"	[1 1 0]	"#FFFF00"
"black"	"k"	[0 0 0]	"#000000"
"white"	"w"	[1 1 1]	"#FFFFFF"

Here are the RGB triplets and hexadecimal color codes for the default colors MATLAB^® uses in many types of plots.

RGB Triplet	Hexadecimal Color Code	Appearance
[0 0.4470 0.7410]	"#0072BD"
[0.8500 0.3250 0.0980]	"#D95319"
[0.9290 0.6940 0.1250]	"#EDB120"
[0.4940 0.1840 0.5560]	"#7E2F8E"
[0.4660 0.6740 0.1880]	"#77AC30"
[0.3010 0.7450 0.9330]	"#4DBEEE"
[0.6350 0.0780 0.1840]	"#A2142F"

FontColor — Font color

[] (default) | RGB triplet | hexadecimal color code | 'r' | 'g' | 'b' | ...

Font color, specified as an RGB triplet, a hexadecimal color code, or one of the options listed in the table.

RGB triplets and hexadecimal color codes are useful for specifying custom colors.

• An RGB triplet is a three-element row vector whose elements specify the intensities of the red, green, and blue components of the color. The intensities must be in the range [0,1]; for example, [0.4 0.6 0.7].

• A hexadecimal color code is a character vector or a string scalar that starts with a hash symbol (#) followed by three or six hexadecimal digits, which can range from 0 to F. The values are not case sensitive. Thus, the color codes "#FF8800", "#ff8800", "#F80", and "#f80" are equivalent.

Alternatively, you can specify some common colors by name. This table lists the named color options, the equivalent RGB triplets, and hexadecimal color codes.

Color Name	Short Name	RGB Triplet	Hexadecimal Color Code	Appearance
"red"	"r"	[1 0 0]	"#FF0000"
"green"	"g"	[0 1 0]	"#00FF00"
"blue"	"b"	[0 0 1]	"#0000FF"
"cyan"	"c"	[0 1 1]	"#00FFFF"
"magenta"	"m"	[1 0 1]	"#FF00FF"
"yellow"	"y"	[1 1 0]	"#FFFF00"
"black"	"k"	[0 0 0]	"#000000"
"white"	"w"	[1 1 1]	"#FFFFFF"

Here are the RGB triplets and hexadecimal color codes for the default colors MATLAB uses in many types of plots.

RGB Triplet	Hexadecimal Color Code	Appearance
[0 0.4470 0.7410]	"#0072BD"
[0.8500 0.3250 0.0980]	"#D95319"
[0.9290 0.6940 0.1250]	"#EDB120"
[0.4940 0.1840 0.5560]	"#7E2F8E"
[0.4660 0.6740 0.1880]	"#77AC30"
[0.3010 0.7450 0.9330]	"#4DBEEE"
[0.6350 0.0780 0.1840]	"#A2142F"

Text

FontName — Font name

'' (default) | system-supported font name

Font name, specified as a system-supported font name. The default font depends on the specific operating system and locale.

If the specified font is not available, then MATLAB uses the best match among the fonts available on the system where the app is running.

FontWeight — Font weight

'' (default) | 'normal' | 'bold'

Font weight, specified as one of these values:

• 'normal' — Default weight as defined by the particular font

• 'bold' — Thicker character outlines than 'normal'

Not all fonts have a bold font weight. For fonts that do not, specifying 'bold' results in the normal font weight.

FontAngle — Font angle

'' (default) | 'normal' | 'italic'

Font angle, specified as 'normal' or 'italic'. Not all fonts have an italic font angle. For fonts that do not, specifying 'italic' results in the normal font angle.

HorizontalAlignment — Horizontal alignment of table cell text

'' (default) | 'left' | 'right' | 'center'

Horizontal alignment of table cell text, specified as one of the values in the table.

Value	Example
'left'
'right'
'center'

If you add a Style object that specifies horizontal alignment to a table UI component, it takes precedence over the justifications associated with cell format values that you specify for the ColumnFormat property on the Table object. The ColumnFormat property still converts values as it normally would.

Note

If you add a Style object that specifies horizontal alignment to a tree UI component, the HorizontalAlignment value has no effect on the component appearance.

HorizontalClipping — Side on which long text is clipped

'' (default) | 'left' | 'right'

Side on which long text is clipped, specified as one of the values in the table.

Value	Example
'left'
'right'

Note

If you add a Style object that specifies horizontal clipping to a subset of nodes of a tree or a subset of items of a list box or drop-down UI component, the HorizontalClipping value has no effect on the component appearance. You can still add the style to the entire tree, list box, or drop-down UI component.

Interpreter — Text interpreter

'' (default) | 'none' | 'tex' | 'latex' | 'html'

Text interpreter, specified as:

• 'none' — Display literal characters.

• 'tex'— Interpret text using a subset of TeX markup.

• 'latex'— Interpret text using a subset of LaTeX markup.

• 'html'— Interpret text using a subset of HTML markup.

TeX Markup

Use TeX markup to add superscripts and subscripts and to include special characters in the text.

Modifiers remain in effect until the end of the text. Superscripts and subscripts are an exception because they modify only the next character or the characters within the curly braces. When you set the interpreter to 'tex', the supported modifiers are as follows.

Modifier	Description	Example
^{ }	Superscript	'text^{superscript}'
_{ }	Subscript	'text_{subscript}'
\bf	Bold font	'\bf text'
\it	Italic font	'\it text'
\sl	Oblique font (usually the same as italic font)	'\sl text'
\rm	Normal font	'\rm text'
\fontname{specifier}	Font name — Replace specifier with the name of a font family. You can use this in combination with other modifiers.	'\fontname{Courier} text'
\fontsize{specifier}	Font size —Replace specifier with a numeric scalar value in point units.	'\fontsize{15} text'
\color{specifier}	Font color — Replace specifier with one of these colors: red, green, yellow, magenta, blue, black, white, gray, darkGreen, orange, or lightBlue.	'\color{magenta} text'
\color[rgb]{specifier}	Custom font color — Replace specifier with a three-element RGB triplet.	'\color[rgb]{0,0.5,0.5} text'

This table lists the supported special characters for the 'tex' interpreter.

Character Sequence	Symbol	Character Sequence	Symbol	Character Sequence	Symbol
\alpha	α	\upsilon	υ	\sim	~
\angle	∠	\phi	ϕ	\leq	≤
\ast	*	\chi	χ	\infty	∞
\beta	β	\psi	ψ	\clubsuit	♣
\gamma	γ	\omega	ω	\diamondsuit	♦
\delta	δ	\Gamma	Γ	\heartsuit	♥
\epsilon	ϵ	\Delta	Δ	\spadesuit	♠
\zeta	ζ	\Theta	Θ	\leftrightarrow	↔
\eta	η	\Lambda	Λ	\leftarrow	←
\theta	θ	\Xi	Ξ	\Leftarrow	⇐
\vartheta	ϑ	\Pi	Π	\uparrow	↑
\iota	ι	\Sigma	Σ	\rightarrow	→
\kappa	κ	\Upsilon	ϒ	\Rightarrow	⇒
\lambda	λ	\Phi	Φ	\downarrow	↓
\mu	µ	\Psi	Ψ	\circ	º
\nu	ν	\Omega	Ω	\pm	±
\xi	ξ	\forall	∀	\geq	≥
\pi	π	\exists	∃	\propto	∝
\rho	ρ	\ni	∍	\partial	∂
\sigma	σ	\cong	≅	\bullet	•
\varsigma	ς	\approx	≈	\div	÷
\tau	τ	\Re	ℜ	\neq	≠
\equiv	≡	\oplus	⊕	\aleph	ℵ
\Im	ℑ	\cup	∪	\wp	℘
\otimes	⊗	\subseteq	⊆	\oslash	∅
\cap	∩	\in	∈	\supseteq	⊇
\supset	⊃	\lceil	⌈	\subset	⊂
\int	∫	\cdot	·	\o	ο
\rfloor	⌋	\neg	¬	\nabla	∇
\lfloor	⌊	\times	x	\ldots	...
\perp	⊥	\surd	√	\prime	´
\wedge	∧	\varpi	ϖ	\0	∅
\rceil	⌉	\rangle	〉	\mid	|
\vee	∨	\langle	〈	\copyright	©

LaTeX Markup

To use LaTeX markup, set the interpreter to 'latex'. Use LaTeX markup to format and display mathematical expressions, equations, and special characters. Use dollar symbols around the marked up text. For example, use '$\int_1^{20} x^2 dx$' for inline mode or '$$\int_1^{20} x^2 dx$$' for display mode.

The displayed text uses the default LaTeX font style. The FontName, FontWeight, and FontAngle label properties do not have an effect. To change the font style, use LaTeX markup.

MATLAB supports most standard LaTeX math mode commands. For more information, see Supported LaTeX Commands.

HTML Markup

To use HTML markup, set the interpreter to 'html'. Setting font styles via HTML overrides any equivalent Style font properties. For example, the following code results in red text.

fig = uifigure;
s1 = uistyle("Interpreter","html");
s2 = uistyle("FontColor","blue");

t = uitable(fig);
t.Data = ["<p style='color: red;'>Cell 1</p>"; "<p style='color: red;'>Cell 2</p>"];
addStyle(t,s1)
addStyle(t,s2)

The interpreter supports a subset of HTML markup. As a general guideline, the interpreter supports text-related tags and styles. Unsupported tags and styles are ignored.

This table lists the supported elements and element attributes.

HTML Element	Attributes	Description
a	style, target, href, title	Hyperlink
abbr	style, title	Abbreviation or acronym
address	style	Contact information
article	style	Self-contained, independent content
aside	style	Content indirectly related to the main content
b	style	Bold text
bdi	style, dir	Content formatted in a different direction from surrounding text
bdo	style, dir	Content formatted in a different direction from surrounding text
big	style	Text one font size level larger than surrounding text (obsolete in HTML5)
blockquote	style, cite	Extended quotation
br	n/a	Line break
caption	style	Caption or title of a table
center	style	Content centered horizontally
cite	style	Title of a creative work
code	style	Fragment of code
col	style, align, valign, span, width	Column within a table
colgroup	style, align, valign, span, width	Group of columns within a table
dd	style	Term or value in a description list
del	style, datetime	Text that was deleted from a document
details	style, open	Interactive widget with text visible only when toggled to 'open' state
dl	style	Description list
dt	style	Term or value in a description list
em	style	Emphasized text (typically displayed in italic)
font	style, color, size, face	Text with specified font properties (obsolete in HTML5)
footer	style	Footer
h1. h2, h3, h4, h5, h6	style	Section heading — <h1> is the highest level of heading and <h6> is the lowest
header	style	Introductory content
hr	style	Thematic break
i	style	Text offset from the surrounding content — by default rendered as italic
ins	style, datetime	Text inserted into a document
li	style	Item in a list
mark	style	Marked or highlighted text
ol	style	Ordered list
p	style	Paragraph
pre	style	Preformatted text
s	style	Text with a strikethrough
strike	style	Text with a strikethrough (obsolete in HTML5)
section	style	Standalone section
small	style	Text one font size level smaller than surrounding text (obsolete in HTML5)
sub	style	Subscript
sup	style	Superscript
strong	style	Text with strong importance
table	style, width, border, align, valign	Table
tbody	style, align, valign	Table body
td	style, width, rowspan, colspan, align, valign	Table data cell
tfoot	style, align, valign	Set of table rows that summarize the table columns
th	style, width, rowspan, colspan, align, valign	Table data cell specified as a header of a group of cells
thead	style, align, valign	Set of table rows that specify the column heads
tr	style, rowspan, align, valign	Row of table cells
tt	style	Monospace text (obsolete in HTML5)
u	style	Text with an unarticulated annotation — by default rendered as an underline
ul	style	Unordered list

For more information about these elements, see https://developer.mozilla.org/en-US/docs/Web/HTML/Element.

To use HTML markup to create a hyperlink that runs MATLAB code, see Create Hyperlinks that Run Functions.

You can use HTML style attributes to format HTML content. A style attribute is a string of CSS attributes and their values.

These CSS attributes are supported:

• background-color

• border-bottom

• border-bottom-color

• border-bottom-left-radius

• border-bottom-right-radius

• border-bottom-style

• border-bottom-width

• border-left

• border-left-color

• border-left-style

• border-left-width

• border-radius

• border-right

• border-right-color

• border-right-style

• border-right-width

• border-spacing

• border-style

• border-top

• border-top-color

• border-top-left-radius

• border-top-right-radius

• border-top-style

• border-top-width

• border-width

• color

• direction

• font-family

• font-size

• font-style

• font-weight

• height

• hidden

• line-height

• margin

• margin-bottom

• margin-left

• margin-right

• margin-top

• max-height

• max-width

• min-height

• min-width

• overflow

• overflow-wrap

• overflow-x

• overflow-y

• padding

• padding-bottom

• padding-left

• padding-right

• padding-top

• text-align

• text-anchor

• text-decoration

• text-indent

• text-overflow

• text-shadow

• text-transform

• title

• translate

• white-space

• width

For more information about these attributes, see https://developer.mozilla.org/en-US/docs/Web/CSS/Reference.

Icons

Icon — Predefined or custom icon

'' (default) | character vector | string scalar | truecolor image array

Predefined or custom icon, specified as a character vector, string scalar, or truecolor image array.

Predefined Icon

This table lists the values to specify the predefined icons.

Value	Icon
'question'
'info'
'success'
'warning'
'error'
'none'	No icon displays.

Custom Icon

Specify a custom icon as one of these values:

• A character vector or string scalar that specifies the file name of an SVG, JPEG, GIF, or PNG image that is on the MATLAB path. Alternatively, you can specify a full path to the image file.

• A truecolor image array. See Working with Image Types in MATLAB for more information.

IconAlignment — Alignment of table cell icon

'' (default) | 'left' | 'right' | 'center' | 'leftmargin' | 'rightmargin'

Alignment of table cell icon, specified as one of the values in the table. The examples in the table show the result of specifying each IconAlignment value for a table UI component with a HorizontalAlignment style of 'center'.

Value	Description	Example
'left'	The icon is displayed directly to the left of the text.
'right'	The icon is displayed directly to the right of the text.
'center'	The icon is displayed in the center of the cell, behind the text.
'leftmargin'	The icon is displayed on the far left of the cell, regardless of the text position. This value is equivalent to 'left' when the value of HorizontalAlignment is 'left'.
'rightmargin'	The icon is displayed on the far right of the cell, regardless of the text position. This value is equivalent to 'right' when the value of HorizontalAlignment is 'right'.

Note

If you add a Style object that specifies icon alignment to a tree UI component, the property has no effect on the tree appearance.

Version History

Introduced in R2019b

R2023a: Create styles for list box and drop-down UI components

Create styles to add to items of a list box or drop-down UI component. Use the addStyle function to add a style to a ListBox or DropDown object.

R2022a: Create styles to add icons and format text

Create styles to add icons and format text for table and tree UI components.

• Specify the Icon property of the style object to add icons to table cells and tree nodes.

• Specify the IconAlignment property of the style object to modify where the icon appears in relation to the text in table cells.

• Specify the Interpreter property of the style object to format text or add links using HTML markup, or to add equations using TeX or LaTeX markup for table cells and tree nodes.

• Specify the HorizontalClipping property of the style object to control whether long text is clipped on the left or the right in table cells and tree nodes.